thermometer- styles

3Overview

thermometer 의 전반적인 스타일에 대한 값을 정의

stylesMidnighttruejs
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'
		}
	}
};

Configuration Styles

layout

Thermoemter의 레이아웃 스타일

Parameters

   defaulttype설명
layoutpositionx0numberthermometer 의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값
 y0numberthermometer 의 Y 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 상, 하 위치 값
areacolor'#f8f8f8'stringSVG 전체 영역의 배경 색상
 border'#c1c6cc'stringSVG 전체 영역의 테두리 색상

Usage

layout.positionMidnighttruejs
var styles = {
	layout: {
		position: {
			x : 50,
			y : 50	
		},
		area : {
			color : '#f8f8f8',
			border : '#c1c6cc'
		}
	}
}

Demo

Publisher Go 

object

object.width

thermometer의 넓이 설정 ( thermometer 의 경우 width의 크기에 비례하여 height 값을 설정 ) 

parameters

  defaulttype설명
objectwidth360number

지정해준 값을 pixel 단위로 적용된다.

  • options.use.resize = true 일때만 사용 가능하다.

Usage

pie.radiusMidnighttruejs
var styles = {
	object: {
		width: 900
	}
}

Demo

Publisher Go

counter

치수표시판의 스타일 설정

Parameters 

   defaulttype설명
counterx 0numbercounter의 X 축 위치, default로 그려진 위치를 기준으로 좌, 우 위치 값
y 0numbercounter의 Y 축 위치, default로 그려진 위치를 기준으로 상, 하 위치 값
width 80numbercounter의 가로 넓이,  픽셀단위 (pixel)
height 40numbercounter의 세로 높이,  픽셀단위 (pixel)
radius 2numbercounter의 border-radius 조절
color '#fcfcfc'stringcounter영역의 배경 색상
border '#bdc2ca'stringcounter의 테두리 색상
textfamily'LCDMono'stringcounter 내의 텍스트 영역 글씨체 (font-family)
 size1numbercounter 내의 텍스트의 크기, default로 그려진 크기의 비율에 근거하여 비례 (font-size)
 weight800number || stringcounter 내의 텍스트 영역 text두께 (font-weight)
 color'#484b4e'stringcounter 내의 텍스트 영역 text 색상

Usage

layout.positionMidnighttruejs
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'
		}
	}
}

Demo

Publisher Go 

 

axis

눈금 및 치수와 관련된 스타일 설정

Parameters  

   defaulttype설명
axisblock 10number눈금 수
interval 4number눈금 간격
textnum5number축의 치수를 나타내는 텍스트 영역의 수
 family'LCDMono'string축의 치수를 나타내는 텍스트의 글씨체 (font-family)
 size12number축의 치수를 나타내는 텍스트의 글씨 크기(font-size)
 weight"bold"number || string축의 치수를 나타내는 텍스트의 글씨 두께 (font-weight)
 align"end"string축의 치수를 나타내는 텍스트의 글씨의 정렬 (text-aligin)
 color'#797f85'string축의 치수를 나타내는 텍스트의 글씨 색상
long_barcolor'#a3aab1'string축의 치수를 가르키는 눈금의 색상
 length15number축의 치수를 가르키는 눈금의 길이
short_barcolor'#c3c8cd'string축의 눈금의 색상
 length7.5number축의 눈금의 길이

Usage

layout.positionMidnighttruejs
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
		}
	},
}

Demo

Publisher Go 

 

thermometer

 

Thermoemter 와 관련된 스타일 설정

 

Parameters  

   defaulttype설명
thermometerprevBackgroundcolor'#fcfcfc'string이전 값 > 현재값 일때, 보이는 배경색상
 border'none'string이전 값 > 현재값 일때, 보이는 테두리
prevBarsize1number이전 데이터 값을 나타내는 잔상의 두께
 color'#ff6360'string이전 데이터 값을 나타내는 잔상의 색상
 opacity0.5number이전 데이터 값을 나타내는 잔상의 투명도
bottomcolor'#ff6360'stringthermometer 밑부분에 색상 (원모양)
 border'#bcc7d4'stringthermometer 밑부분에 테두리 (원모양)
backcolor'#fcfcfc'stringthermometer의 배경 색상
 border'#bcc7d4'stringthermometer의 테두리 색상
barcolor'100-#ff6360-#ff908e'string현재 데이터를 표시한 bar의 색상
 border'none'string현재 데이터를 표시한 bar를 둘러싼 테두리 색상

 

Usage

layout.positionMidnighttruejs
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'

		}
	}
}

 

Demo

Publisher Go 


 

pointer

 

cylinder 의 최대값, 평균값, 타겟값 styles

 

 

 

pointer.max

 

options.use.max == true 인 경우, max값 styles

 

 

 

parameters

 

    defaulttype설명
pointermaxbarcolor'#ff625f'stringmax값을 나타내는 선의 색상
   length10numbermax값을 나타내는 선의 길이
  fontsize10numbermax 글씨의 크기
   color'#ff625f'stringmax 글씨의 색상
   align'start'stringmax 글씨의 정렬
   family'Nanum Gothic'string최대값의 글씨 타입

 

 

 

pointer.avg

 

options.use.avg== true 인 경우, 평균값 styles

 

 

 

parameters

 

    defaulttype설명
pointeravgbarcolor'#2bcdba'string평균값을 나타내는 선의 색상
   length10number평균값을 나타내는 선의 길이
  fontsize10number평균값의 글씨 크기
   color'#2bcdba'string평균값의 글씨 색상
   align'start'string평균값의 글씨 정렬
   family'Nanum Gothic'string평균값의 글씨 타입

 

 

 

pointer.target

 

 target값 styles ( ※ options.use.target을 true 설정한 경우에만 사용이 가능합니다. )

 

 

 

parameters

 

   defaulttype설명
pointertargetcolor'#8394a6'stringtarget값을 표시하는 마크의 색상

 

 

 

Usage

 

legend.useMidnighttruejs
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'
		}
	}
}

 

 

 

Demo

 

Publisher Go