horizon chart - styles

3Overview

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

stylesMidnighttruejs
var defaultStyles = {
	layout : {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		},
		paddingTop : 30,
		paddingBottom : 20,
		paddingLeft : 20,
		paddingRight : 30
	},
	graph : {
		paddingTop: 10,
		paddingBottom: 10,
		paddingLeft: 10,
		paddingRight: 10,
		area : {
			color: '#f8f8f8'
		},
		line: {
			top: { 
				color: '#cccccc', 
				width: 1, 
				opacity: 1 
			},
			left: { 
				color: '#cccccc', 
				width: 1, 
				opacity: 1 
			},
			right: { 
				color: '#cccccc', 
				width: 1, 
				opacity: 1 
			},
			bottom: { 
				color: '#cccccc', 
				width: 1, 
				opacity: 1 
			}
		}		            
	},
	yAxis: {
		width: 30,
		position: 'left', 
		paddingLeft: 10, 
		paddingRight: 20,
		baseZero : true,
		line: {
			color: '#cccccc', 
			width: 1, 
			opacity: 1,			
			underLine : {
				use : false,
				color: '#3e4150', 
				width: 1, 
				opacity: 1
			}
		},
		text: {
			family: 'Nanum Gothic', 
			size: 12, 
			color: '#737373', 
			align: 'right',		/* left | center | right */
			style: 'normal', 	/* normal | italic */
			weight: 'bold',	/* normal | bold */
			opacity: 1
		},
		tick: {
			use : false,
			length: 8, 
			color: '#202228',
			width: 1, 
			opacity: 1,
			position: 'out'	/* out|in */
		}
	},
	xAxis: {
		height: 10, 
		paddingTop: 25, 
		line: { 
			use :false,
			color: '#e3e3e3', 
			width: 1, 
			opacity: 1,			
			underLine : {
				use : false,
				color: '#3e4150', 
				width: 1, 
				opacity: 1
			}
		},
		text: {
			family: 'Nanum Gothic',
			size: 12, 
			color: '#737373', 
			align: 'center',	/* left | center | right */
			style: 'normal',	/* normal | italic */
			weight: 'bold',	/* normal | bold */
			opacity: 1
		},
		gap : 30
	},
	series : {
		s1 : {
			use : true,
			way : 'up',
			line: {
				color: '#f26744', 
				width: 1, 
				opacity: 1
			},
			area : {
				color : '#fcb3b1',
				opacity: 1
			},
			animate : {
				use : true,
				type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
				speed : 400				     	
			}
		}, 
		s2 : {
			use : true,
			way : 'up',
			line: {
				color: '#e42f02', 
				width: 1, 
				opacity: 1
			},
			area : {
				color : '#ff6d6a',
				opacity: 1
			},
			animate : {
				use : true,
				type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
				speed : 400	
			}
		},
		s3 : {
			use : true,
			way : 'down',
			line: {
				color: '#485fff', 
				width: 1, 
				opacity: 1
			},
			area : {
				color : '#a2d6ee',
				opacity: 1
			},
			animate : {
				use : true,
				type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
				speed : 400	
			}
		},
		s4 : {
			use : true,
			way : 'down',
			line: {
				color: '#6095ff', 
				width: 1, 
				opacity: 1
			},
			area : {
				color : '#1c9edc',
				opacity: 1
			},
			animate : {
				use : true,
				type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
				speed : 400
			}
		}
	},
	verticalLine : {
		use : true,
		type : '',	/* - | . | -. | -.. | .  | -  | -- | - . | --. | --.. */
		color : '#465866',
		width : 1,
		opacity : 1
	},
	horizonLine : {
		use : true,
		type : '',	/* - | . | -. | -.. | .  | -  | -- | - . | --. | --.. */
		color : '#465866',
		width : 1,
		opacity : 1
	}
};

Configuration Styles

layout

SVG 전체 영역 스타일

Parameters

   defalulttype설명
layout


paddingTop 30number

SVG 전체 영역의 상단 여백

paddingBottom 20number

SVG 전체 영역의 하단 여백

paddingLeft 20numberSVG 전체 영역의 좌측 여백
paddingRight 30numberSVG 전체 영역의 우측 여백
areacolor'#f8f8f8'stringSVG 전체 영역의 배경 색상
line color'#eaeaea'stringSVG 전체 영역의 테두리 색상
width1numberSVG 전체 영역의 테두리 두께

Usage

layoutMidnighttruejs
var styles = {
	layout: {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		},
		paddingTop : 30,
		paddingBottom : 30,
		paddingLeft : 30,
		paddingRight : 30
	}
}

Demo

Publisher Go 

graph

graph.padding-

Horizon Chart 가 그려지는 영역의 여백

Parameters

  defalulttype설명
graph


paddingTop10number

graph 의 상단 여백

paddingBottom10number

graph 의 하단 여백

paddingLeft10numbergraph 의 좌측 여백
paddingRight10numbergraph 의 우측 여백

Usage

graphMidnighttruejs
var styles = {
	graph: {
		paddingTop : 10,
		paddingBottom : 10,
		paddingLeft : 10,
		paddingRight : 10
	}
}

Demo

Publisher Go

graph.area

graph 의 area 영역에 대한 스타일 정의

Parameters

   defaulttype설명
graphareacolor'#f8f8f8'stringgraph 의 배경 색상

Usage

graph.areaMidnighttruejs
var styles = {
	graph: {
		area: {
			color : '#fff'
		}
	}
}

Demo

Publisher Go

graph.line

Horizon Chart 가 그려지는 영역의 테두리 설정(상, 하, 좌, 우 각각 따로 지정)

Parameters

    defaulttype설명
graph










line










top

color'#cccccc'string상단 선 색상 (영문컬러명이나 RGB값 입력)
width1number상단 선 두께 (0 ~ )
opacity1number상단 선 투명도 (0 ~ 1)
left

color'#cccccc'string좌측 선 색상 (영문컬러명이나 RGB값 입력)
width1number좌측 선 두께 (0 ~ )
opacity1number좌측 선 투명도 (0 ~ 1)
right

color'#cccccc'string우측 선 색상 (영문컬러명이나 RGB값 입력)
width1number우측 선 두께 (0 ~ )
opacity1number우측 선 투명도 (0 ~ 1)
bottom

color'#cccccc'string하단 선 색상 (영문컬러명이나 RGB값 입력)
width1number하단 선 두께 (0 ~ )
opacity1number하단 선 투명도 (0 ~ 1)

Usage

graph.lineMidnighttruejs
var styles = {
	graph: {
		line: {
			top : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1
			},
			bottom : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1

			},
			left : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1

			},
			right : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1

			}
		}
	}
}

Demo

Publisher Go

yAxis

yAxis.width

Y 축 텍스트가 출력되는 영역의 넓이

Parameters

  defaulttype설명
yAxiswidth30numberY축 label의 넓이

Usage

yAxis.widthMidnighttruejs
var styles = {
	yAxis: {
		width : 60
	}
}

Demo

Publisher Go

yAxis.padding-

Y축 label의 위치

Parameters

  defaulttype설명
yAxispaddingLeft10numberY축 label 영역의 좌측 여백
paddingRight20numberY축 label 영역의 우측 여백

Usage

yAxis.padding-Midnighttruejs
var styles = {
	yAxis: {
		paddingLeft: 10,
		paddingRight: 20
	}
}

Demo

Publisher Go

yAxis.line 

Y 축 Line 스타일 정의

Parameters 

    defaulttype설명
yAxislinecolor '#cccccc'stringY축 선 색상 (영문컬러명이나 RGB값 입력)
width 1numberY축 선 두께 (0 ~ )
opacity 1numberY축 선 투명도 (0~1)
underLineusefalsebooleanY축 선의 이중 선 사용 여부 ( 'true' or 'false' )
color'#3e4150'stringY축 선의 이중 선 색상 (영문컬러명이나 RGB값 입력)
width1numberY축 선의 이중 선 두께 (0 ~ )
opacity1numberY축 선의 이중 선 투명도 (0~1)

Usage

yAxis.lineMidnighttruejs
var styles = {
	yAxis: {
		line : {
			color: '#bab9ba',            
			width: 1,
            opacity: 1,
            underLine : {
                use : true,
                color: '#3e4150',
                width: 1,
                opacity: 1
            }
		}
	}
}

Demo

Publisher Go

yAxis.text

Y 축의 text 영역

Parameters  

   defaulttype설명
yAxistextfamily'Nanum Gothic'string글꼴 종류 이름 ( 영문명 )
size12number글꼴 크기 ( px 단위 )
color'#737373'string글꼴 색상 ( 영문 색상명 혹은 RGB값 )
align'right'stringlabel width 내에서의 텍스트 위치 ( 'left' or 'right' or 'center' )
style'normal'string글꼴 모양 ( 'normal' or 'italic')
weight'bold'string글꼴 두께 ( 'normal' or 'bold' )
opacity1number글꼴 투명도 ( 0 ~ 1 )

Usage

yAxis.textMidnighttruejs
var styles = {
	yAxis: {
		text : {
			family : 'dotum',
			size : 11, 
			color : '#000',
			align : 'center',		/* [ left or center or right ] */
			style : 'normal',		/* [ normal or italic ] */
			weight : 'normal',		/* [ normal or bold ] */
			opacity : 1
		}
	}
}

Demo

Publisher Go

yAxis.tick

Y 축의 tick 스타일 정의

Parameters

   defaulttype설명
yAxistickusefalsebooleantick 사용 여부 ( 'true' or 'false' )
length8numbertick 길이
color'#202228'stringtick 색상 ( 영문 색상명 혹은 RGB값 )
width1numbertick 의 두께 ( 0 ~ )
opacity1numbertick 의 투명도 ( 0 ~ 1 )
position'in'stringtick 의 위치 ( 'in' or 'out' , 그래프 내부에 tick 이 위치할 경우 'in', 외부에 위치할 경우 'out' )

Usage

yAxis.tickMidnighttruejs
var styles = {
	yAxis: {
		tick: {
			use : false,
			length : 5, 
			color : '#000',
			width : 1,
			opacity : 1,
			position : 'out'	[ 'in' or 'out' ]
		}
	}
}

Demo

Publisher Go

xAxis

xAxis.height

X 축 label 영역의 높이

Parameters

  defaulttype설명
xAxisheight0number

X축 label의 높이

Usage

xAxis.heightMidnighttruejs
var styles = {
	xAxis: {
		height : 10
	}
}

Demo

Publisher Go

xAxis.paddingTop

X 축 label 영역의 padding-top 

Parameters 

  defaulttype설명
xAxispaddingTop25numberX축 label 영역의 상단 여백

Usage

xAxis.padddingTopMidnighttruejs
var styles = {
	xAxis: {
		paddingTop: 20
	}
}

Demo

Publisher Go

xAxis.line 

X 축 선 스타일 정의

Parameters 

    defaulttype설명
xAxislinecolor '#e3e3e3'stringX축 선 색상 (영문컬러명이나 RGB값 입력)
width 1numberX축 선 두께 (0 ~ )
opacity 1numberX축 선 투명도 (0~1)
underLineusefalsebooleanX축 선의 이중 선 사용 여부 ( 'true' or 'false' )
color'#3e4150'stringX축 선의 이중 선 색상 (영문컬러명이나 RGB값 입력)
width1numberX축 선의 이중 선 두께 (0 ~ )
opacity1numberX축 선의 이중 선 투명도 (0~1)

Usage

xAxis.lineMidnighttruejs
var styles = {
	xAxis: {
		line : {
			color: '#bab9ba',            
			width: 1,
            opacity: 1,
            underLine : {
                use : true,
                color: '#3e4150',
                width: 1,
                opacity: 1
            }
		}
	}
}

Demo

Publisher Go

xAxis.text

X 축의 text 영역

Parameters  

   defaulttype설명
xAxistextfamily'Nanum Gothic'string글꼴 종류 이름 ( 영문명 )
size12number글꼴 크기 ( px 단위 )
color'#737373'string글꼴 색상 ( 영문 색상명 혹은 RGB값 )
align'center'stringlabel width 내에서의 텍스트 위치 ( 'left' or 'right' or 'center' )
style'normal'string글꼴 모양 ( 'normal' or 'italic')
weight'bold'string글꼴 두께 ( 'normal' or 'bold' )
opacity1number글꼴 투명도 ( 0 ~ 1 )

Usage

xAxis.textMidnighttruejs
var styles = {
	yAxis: {
		text : {
			family : 'dotum',
			size : 11, 
			color : '#000',
			align : 'center',		/* [ left or center or right ] */
			style : 'normal',		/* [ normal or italic ] */
			weight : 'normal',		/* [ normal or bold ] */
			opacity : 1
		}
	}
}

Demo

Publisher Go

series

series.line

Horizon Chart 의 series 스타일 지정

Parameters  

    valuetype설명
series

use  truebooleanseries 의 사용 여부 ( 'true' our 'false' )
way  'up'string

series 의 'way' 를 선택 ( 'up' or 'down' )

  • way 가 'up' 일 경우 시리즈는 Y 축 0 을 기준으로 위로 그려진다.
  • way 가 'down' 일 경우 시리즈는 Y 축 0 을 기준으로 아래로 그려진다.
s1 [s2, s3, s4 ···]linecolor'#f26744'stringseries 의 선 색상 (영문컬러명이나 RGB 값 입력)
width0numberseries의 선 두께 (0 ~ )
opacity1numberseries의 선 투명도 (0 ~ 1)
areacolor'#ec1f2e'stringseries 의 면 색상 (영문컬러명이나 RGB 값 입력)
opacity1numberseries의 면 투명도 (0 ~ 1)
animateuse'true'booleanseries 의 애니메이션 사용 여부 ( 'true' our 'false' )
type'linear'string

series 의 애니메이션 타입

( 'linear' or '>' or '<' or '<>' or 'bounce' or 'elastic' or 'backIn' or 'backOut' )

speed400number애니메이션 속도

Usage

seriesMidnighttruejs
var styles = {
	series: {
		s1 : {
			use : true,
			way : 'up'   /* 'up' or 'down' */
			line : {
				color : '#ff0000',
				width : 1,
				opacity : 1
			},
			area : {
				color : '#ec1f2e',
				opacity : 1
			},
			animate : {
				use : true,
				type : 'linear',
				speed : 400
			}
		}
	}
}

Demo

Publisher Go

verticalLine

Horizon Chart 의 마우스 오버 시 verticalLine 스타일 지정

Parameters  

  defaulttype설명
verticalLineusetruebooleanHorizon Chart 에 마우스 오버시 마우스 포인터의 위치로부터 수직선을 보여준다 ( 'true' or 'false' )
type' 'string수직선의 형태 ( ' - ' or ' . ' or ' -. ' or ' -.. ' or ' . ' or ' - ' or ' -- ' or ' - . ' or ' --. ' or ' --.. ' )
color'#465866'string수직선의 색상  (영문컬러명이나 RGB 값 입력)
width1number수직선의 두께 (0 ~ )
opacity1number수직선의 투명도 (0 ~ 1)

Usage

verticalLineMidnighttruejs
var styles = {
	verticalLine : {
		use : false,
		type : '--..',	/* - | . | -. | -.. | .  | -  | -- | - . | --. | --.. */
		color : '#ff0000',
		width : 1,
		opacity : 1
	}
}

Demo

Publisher Go

horizonLine

Horizon Chart 의 마우스 오버 시 horizonLine 스타일 지정

Parameters  

  defaulttype설명
horizonLineusetruebooleanHorizon Chart 에 마우스 오버시 마우스 포인터의 위치로부터 수평선을 보여준다 ( 'true' or 'false' )
type' 'string수평선의 형태 ( ' - ' or ' . ' or ' -. ' or ' -.. ' or ' . ' or ' - ' or ' -- ' or ' - . ' or ' --. ' or ' --.. ' )
color'#465866'string수평선의 색상  (영문컬러명이나 RGB 값 입력)
width1number수평선의 두께 (0 ~ )
opacity1number수평선의 투명도 (0 ~ 1)

Usage

horizonLineMidnighttruejs
var styles = {
	verticalLine : {
		use : false,
		type : '--..',	/* - | . | -. | -.. | .  | -  | -- | - . | --. | --.. */
		color : '#ff0000',
		width : 1,
		opacity : 1
	}
}

Demo

Publisher Go