thermometer 의 전반적인 스타일에 대한 값을 정의
var defaultStyles = { layout : { position : { x : 0, y : 0 }, area : { color : '#f8f8f8', border :'#c1c6cc' } }, object : { width: 360 }, counter : { x: 0 , y: 0 , width : 80 , height : 40, radius: 2, color : '#fcfcfc', border : '#bdc2ca', text : { family : 'LCDMono', size : 1, weight : 800, color:'#484b4e' } }, axis : { block : 10 , interval : 4 , text : { num : 5, family: defaultFont, size: 12, weight: "bold", align: "end", color : "#797f85" }, blockLine: { color: "#a3aab1", length : 15 }, intervalLine: { color: "#c3c8cd", length: 7.5 } }, thermometer : { prevBackground: { color : "#fcfcfc", border : 'none' }, prevBar: { size : 1, color : "#ff6360", border : 'none', opacity : 0.5 }, bottom : { color : '#ff6360', border : "#bcc7d4" }, back: { color : "#fcfcfc", border : "#bcc7d4" }, bar : { color : "100-#ff6360-#ff908e", border : 'none' } }, pointer : { max : { bar : { color : '#ff625f', length :10 }, font : { size : 10, color : '#ff625f', align: 'start', position : -18, family: 'defaultFont' } }, avg : { bar : { color : '#2bcdba', length :10 }, font : { size : 10, color : '#2bcdba', align: 'start', position : -18, family: 'defaultFont' } }, target : { color : '#8397a6' } } };
Thermoemter의 레이아웃 스타일
default | type | 설명 | |||
---|---|---|---|---|---|
layout | position | x | 0 | number | thermometer 의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값 |
y | 0 | number | thermometer 의 Y 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 상, 하 위치 값 | ||
area | color | '#f8f8f8' | string | SVG 전체 영역의 배경 색상 | |
border | '#c1c6cc' | string | SVG 전체 영역의 테두리 색상 |
var styles = { layout: { position: { x : 50, y : 50 }, area : { color : '#f8f8f8', border : '#c1c6cc' } } }
thermometer의 넓이 설정 ( thermometer 의 경우 width의 크기에 비례하여 height 값을 설정 )
default | type | 설명 | ||
---|---|---|---|---|
object | width | 360 | number | 지정해준 값을 pixel 단위로 적용된다.
|
var styles = { object: { width: 900 } }
치수표시판의 스타일 설정
default | type | 설명 | |||
---|---|---|---|---|---|
counter | x | 0 | number | counter의 X 축 위치, default로 그려진 위치를 기준으로 좌, 우 위치 값 | |
y | 0 | number | counter의 Y 축 위치, default로 그려진 위치를 기준으로 상, 하 위치 값 | ||
width | 80 | number | counter의 가로 넓이, 픽셀단위 (pixel) | ||
height | 40 | number | counter의 세로 높이, 픽셀단위 (pixel) | ||
radius | 2 | number | counter의 border-radius 조절 | ||
color | '#fcfcfc' | string | counter영역의 배경 색상 | ||
border | '#bdc2ca' | string | counter의 테두리 색상 | ||
text | family | 'LCDMono' | string | counter 내의 텍스트 영역 글씨체 (font-family) | |
size | 1 | number | counter 내의 텍스트의 크기, default로 그려진 크기의 비율에 근거하여 비례 (font-size) | ||
weight | 800 | number || string | counter 내의 텍스트 영역 text두께 (font-weight) | ||
color | '#484b4e' | string | counter 내의 텍스트 영역 text 색상 |
var styles = { counter : { x: -10 , y: 20 , width : 120, height : 60, r: 2, color : '#fcfcfc', border : '#bdc2ca', text : { family : 'Gulim', size : 1, weight : 'bold', color:'#484b4e' } } }
눈금 및 치수와 관련된 스타일 설정
default | type | 설명 | |||
---|---|---|---|---|---|
axis | block | 10 | number | 눈금 수 | |
interval | 4 | number | 눈금 간격 | ||
text | num | 5 | number | 축의 치수를 나타내는 텍스트 영역의 수 | |
family | 'LCDMono' | string | 축의 치수를 나타내는 텍스트의 글씨체 (font-family) | ||
size | 12 | number | 축의 치수를 나타내는 텍스트의 글씨 크기(font-size) | ||
weight | "bold" | number || string | 축의 치수를 나타내는 텍스트의 글씨 두께 (font-weight) | ||
align | "end" | string | 축의 치수를 나타내는 텍스트의 글씨의 정렬 (text-aligin) | ||
color | '#797f85' | string | 축의 치수를 나타내는 텍스트의 글씨 색상 | ||
long_bar | color | '#a3aab1' | string | 축의 치수를 가르키는 눈금의 색상 | |
length | 15 | number | 축의 치수를 가르키는 눈금의 길이 | ||
short_bar | color | '#c3c8cd' | string | 축의 눈금의 색상 | |
length | 7.5 | number | 축의 눈금의 길이 |
var styles = { axis : { block : 10 , interval : 4 , text : { num : 5, family: 'gulim', size: 12, weight: 800, align: "end", color : "#797f85" }, long_bar : { color: "#a3aab1", length : 15 }, short_bar : { color: "#c3c8cd", length: 7.5 } }, }
Thermoemter 와 관련된 스타일 설정
default | type | 설명 | |||
---|---|---|---|---|---|
thermometer | prevBackground | color | '#fcfcfc' | string | 이전 값 > 현재값 일때, 보이는 배경색상 |
border | 'none' | string | 이전 값 > 현재값 일때, 보이는 테두리 | ||
prevBar | size | 1 | number | 이전 데이터 값을 나타내는 잔상의 두께 | |
color | '#ff6360' | string | 이전 데이터 값을 나타내는 잔상의 색상 | ||
opacity | 0.5 | number | 이전 데이터 값을 나타내는 잔상의 투명도 | ||
bottom | color | '#ff6360' | string | thermometer 밑부분에 색상 (원모양) | |
border | '#bcc7d4' | string | thermometer 밑부분에 테두리 (원모양) | ||
back | color | '#fcfcfc' | string | thermometer의 배경 색상 | |
border | '#bcc7d4' | string | thermometer의 테두리 색상 | ||
bar | color | '100-#ff6360-#ff908e' | string | 현재 데이터를 표시한 bar의 색상 | |
border | 'none' | string | 현재 데이터를 표시한 bar를 둘러싼 테두리 색상 |
var styles = { thermometer: { prevBackground : { color : '#fcfcfc', border : 'none' }, prevBar: { size: 3, color : '#ff6360', opacity: 0.7 }, bottom: { color : '#ff6360', border : 'none' }, back: { color : '#ff6360', border : 'none' }, bar: { color : '#ff6360', border : 'none' } } }
cylinder 의 최대값, 평균값, 타겟값 styles
options.use.max == true 인 경우, max값 styles
default | type | 설명 | ||||
---|---|---|---|---|---|---|
pointer | max | bar | color | '#ff625f' | string | max값을 나타내는 선의 색상 |
length | 10 | number | max값을 나타내는 선의 길이 | |||
font | size | 10 | number | max 글씨의 크기 | ||
color | '#ff625f' | string | max 글씨의 색상 | |||
align | 'start' | string | max 글씨의 정렬 | |||
family | 'Nanum Gothic' | string | 최대값의 글씨 타입 |
options.use.avg== true 인 경우, 평균값 styles
default | type | 설명 | ||||
---|---|---|---|---|---|---|
pointer | avg | bar | color | '#2bcdba' | string | 평균값을 나타내는 선의 색상 |
length | 10 | number | 평균값을 나타내는 선의 길이 | |||
font | size | 10 | number | 평균값의 글씨 크기 | ||
color | '#2bcdba' | string | 평균값의 글씨 색상 | |||
align | 'start' | string | 평균값의 글씨 정렬 | |||
family | 'Nanum Gothic' | string | 평균값의 글씨 타입 |
target값 styles ( ※ options.use.target을 true 설정한 경우에만 사용이 가능합니다. )
default | type | 설명 | |||
---|---|---|---|---|---|
pointer | target | color | '#8394a6' | string | target값을 표시하는 마크의 색상 |
var styles = { pointer: { max: { bar : { color : '#ff625f', length : 10 }, font : { size : 10, color : '#ff625f', align : 'start' , family : 'Gulim' } }, avg: { bar : { color : '#2bcdba', length : 10 }, font : { size : 10, color : '#2bcdba', align : 'start' , family : 'Gulim' } }, target: { color : '#8394a6' } } }