linear gauge - styles

 

3

Overview

Linear_Gauge 의 전반적인 스타일에 대한 값을 정의합니다.

stylesMidnighttruejs
var defaultStyles = {
	layout : {
		position : {
			x : 0,
			y : 0
		},
		area : {
			color : '#f8f8f8',
			border :'#c1c6cc'
		}
	},
	object : {
		width : 360,
		height : 240
	},
	counter : {
		x: 0 ,
		y: 0 ,
		width : 80,
		height : 40,
		radius : 2,
		color : '#fcfcfc',
		border : '#bdc2ca',
		text : {
			family : 'LCDMono',
			size : 20,
			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
		}
	},
	linear : {
		change : {
			color : "100-#ff6360-#ff908e",
			border : 'none',
			opacity : 0.1
		},
		base : {
			color : "#fcfcfc",
			border : '#bcc7d4'
		},
		led:{
			dropColor : "#ff908e" ,
			color : "100-#ff6360-#ff908e",
			border : "none"
		},
		pointer : {
			color : "#ff625f",
			border :  "#ff625f",
			lineSize  :2,
			mark : {
				color: "#ff625f",
				border: "none"
			}
		}
	},
	pointer: {
		max : {
			bar : {
				color : '#ff625f',
				length :10
			},
			font : {
				size : 13,
				color :  '#ff625f',
				align: 'start',
				position : -18,
                family: 'defaultFont'
			}
		},
		avg : {
			bar : {
				color : '#2bcdba',
				length :10
			},
			font : {
				size : 13,
				color :  '#2bcdba',
				align: 'start',
				position : -18,
                family: 'defaultFont'
			}
		},
		target : {
			color : '#8397a6'
		}
	}
};

 

 Configuration Styles

layout

SVG 전체 영역 스타일 및 Linear Gauge의 위치 조정

 

Parameters

   defaulttype설명
layoutpositionx0numberlinear의 X 축 위치, SVG Element 의 중앙 ( 0 ) 을 기준으로 좌, 우 위치 값
 y0numberlinear의 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


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,
		radius : 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축의 치수를 나타내는 텍스트의 글씨 색상
blockLinecolor'#a3aab1'string축의 치수를 가르키는 눈금의 색상
 length15number축의 치수를 가르키는 눈금의 길이
intervalLinecolor'#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"
		},
		blockLine : {
			color: "#a3aab1",
			length : 15
		},
		intervalLine : {
			color: "#c3c8cd",
			length: 7.5
		}
	},
}

Demo

Publisher Go 


Linear

Linear gauge와 관련된 스타일 설정

 

Parameters  

    defaulttype설명
linearchangecolor '100-#ff6360-#ff908e'string(type이 solid일 때) 현재 데이터의 색상
 border 'none'string(type이 solid일 때) 현재 데이터의 테두리
 opacity 0.1number(type이 solid일 때) 이전 데이터의 잔상을 나타낼 투명도
basecolor '#fcfcfc'stringLinear gauge의 배경 색상
 border '#bcc7d4'stringLinear gauge의 테두리 색상
leddropColor '#ff908e'string(type이 led일 때) 떨어지는 데이터의 색상
 color '100-#ff6360-#ff908e'string(type이 led일 때) 현재 데이터의 색상
 border 'none'string(type이 led일 때) 현재 데이터의 테두리 색상
pointercolor '#ff625f'string(type이 pointer일 때) Linear gauge의 배경 색상
 border '#ff625f'string(type이 pointer일 때) Linear gauge의 테두리색상
 lineSize 2number(type이 pointer일 때) 데이터 표시 라인의 두께
 markcolor'#ff625f'string(type이 pointer일 때) 데이터를 가르키는 모형색상
 borderborder'none'string(type이 pointer일 때) 데이터를 가르키는 모형 테두리 색상

 

Usage

layout.positionMidnighttruejs
var styles = {
	cylinder: {
		p_back : {
			color : '#fcfcfc',
			border : 'none'
		},
		p_bar: {
			size: 3,
			color : '#ff6360',
			opacity: 0.7

		},
		bottom: {
			color : '#ff6360',
			border : 'none'

		},
		back: {
			color : '#ff6360',
			border : 'none'

		},
		bar: {
			color : '#ff6360',
			border : 'none'

		}
	}
}

 

Dmo

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 : 13,
				color :  '#ff625f',
				align: 'start',
				position : -18,
				family : 'Gulim'
			}
		},
		avg: {
			bar : {
				color : '#2bcdba',
				length :10
			},
			font : {
				size : 13,
				color :  '#2bcdba',
				align: 'start',
				position : -18,
				family : 'Gulim'
			}
		},
		target: {
			color : '#8394a6'
		}
	}
}

 

Demo

Publisher Go