Plot Series

3
Overview

Chart Series 중 Plot Series (플롯 시리즈)의 샘플 및 설정.

plot은 line과 area에서 사용된 tick을 이용하여 표현한다.

스타일에 area, line 설정은 모두 tick 설정 내부에서 처리한다.

PlotSeriesMidnighttruejs
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<title>CHART01</title>
	<script type="text/javascript" src="../../../lib/comm/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="../../../libcomm/raphael.js"></script>
	<script type="text/javascript" src="../../../lib/comm/webponent.comm.common.js"></script>
	<script type="text/javascript" src="../../../lib/chart/webponent.chart.js"></script>
	<style type="text/css">
		.chart01 {width: 100%; height: 400px;border: 1px solid #eee;}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var options = {
			data: {
				data: [
					{ Date: '20140101', Mprc: 10000 },
					{ Date: '20140102', Mprc: 20000 },
					{ Date: '20140103', Mprc: 15000 },
					{ Date: '20140104', Mprc: 30000 },
					{ Date: '20140105', Mprc: 5000 }
				]
			},
			format: {
				xAxis: function(_str){
					return _str.substr(0, 4)+'/'+_str.substr(4,2)+'/'+_str.substr(6,2);
				}
			},
			use: {
				animate: true,
				aCrossLine: true
			}
		}
		var styles = {
			main: {
				graph: {
					color: '#fafafa'
				},
				yAxis: {
					text: {
						align: 'right'
					}
				},
				series: {
					s1: {
						tick: {
							style: 'circle', size: 5, overSize: 1.5,
							area: {
								normal: {
									color: '#fff', over: {color: '#fff'}
								}
							},
							line: {
								normal: {
									color: '#2bcdba', width: 3, over: {color: '#465866', width: 3}
								}
							}
						}
					}
				}
			}
		};
		var series = {
			"main": {
				"s1": {series: 'plot', xaxis: 'Date', yaxis: 'Mprc'}
			}
		};
		var chart = webponent.chart.init($('.chart01'), options, styles, series);
	};
	</script>
</head>
<body>
	<div class="chart01"></div>
</body>
</html>

Demo

DEFAULT

Configuration Styles

Default StylesMidnighttruejs
var defaultStyles = {
	tick: { // 도형 스타일
    	style: null, // 도형 종류 - circle, square, triangle, star, diamind
		size: 3, 	 // 도형 크기
		overSize: 1, // 도형 마우스 오버시의 크기 배수
        area: { // 도형의 면 스타일
        	normal: {color: '#00ca00', opacity: 1, over: {color: '#ca00ca', opacity: 1}}, // 일반
        	up: 	{color: '#c42c1c', opacity: 1, over: {color: '#932216', opacity: 1}}, // 상승
        	down: 	{color: '#2e80cc', opacity: 1, over: {color: '#163f91', opacity: 1}}  // 하락
		},
    	line: { // 도형의 선 스타일
			normal: {color: '#00ca00', opacity: 1, width: 1, over: {color: '#ca00ca', opacity: 1, width: 1}}, // 일반
    	    up: 	{color: '#c42c1c', opacity: 1, width: 1, over: {color: '#932216', opacity: 1, width: 1}}, // 상승
       	 	down: 	{color: '#2e80cc', opacity: 1, width: 1, over: {color: '#163f91', opacity: 1, width: 1}}  // 하락
		}
	}
};

색상(면, 선) 변경

Normal Setting

일반적인 선 스타일

Usage

아래 하단 Tick 문단 참고

coloringMidnighttruejs
var styles = {
	series: {
		s1: { 
			tick: {
				style: 'circle', 
				size: 5, 
				overSize: 1.5,
				area: {
					normal: {
						color: '#fff', 
						over: {color: '#fff'}
					}
				},
				line: {
					normal: {
						color: '#2bcdba', 
						width: 3, 
						over: {color: '#465866', width: 3}
					}
				}
			}
		}
	}
}

Demo

기본 형태

Tick

라인에 데이터 지점을 시각적으로 표현하는 도형 스타일 정의.

tick.style = null;

도형의 형태

Parameters

valuestring[ 'circle', 'square', 'triangle', 'star', 'diamond' ]

tick.size = 3;

도형 크기

Parameters

valuenumber도형 크기

tick.overSize = 1;

마우스 오버시에 변할 도형 크기 배수

Parameters

valuenumber도형 크기의 배수(디폴트는 1이므로 크기는 변하지 않는다.)

tick.area = {};

도형의 면 스타일.

  • tick.area.normal = { color: '#00ca00', opacity: 1, over: { color: '#ca00ca', opacity: 1 } };

  • tick.area.up = { color: '#c42c1c', opacity: 1, over: { color: '#932216', opacity: 1 } };

  • tick.area.down = { color: '#2e80cc', opacity: 1, over: { color: '#163f91', opacity: 1 } };

Parameters 

     defaulttype설명
tick










area










normal


color '#00ca00'string도형의 일반 면 색상 (영문컬러명이나 RGB값 입력)
opacity 1number도형의 일반 면 투명도 (0 ~ 1)
overcolor '#ca00ca'string마우스 오버시 도형의 일반 면 색상 (영문컬러명이나 RGB값 입력)
opacity1number마우스 오버시 도형의 일반 면 투명도 (0 ~ 1)
up


color '#c42c1c'string도형의 상승 면 색상 (영문컬러명이나 RGB값 입력)
opacity 1number도형의 상승 면 투명도 (0 ~ 1)
overcolor'#932216'string마우스 오버시 도형의 상승 면 색상 (영문컬러명이나 RGB값 입력)
opacity1number마우스 오버시 도형의 상승 면 투명도 (0 ~ 1)
down


color '#2e80cc'string도형의 하락 면 색상 (영문컬러명이나 RGB값 입력)
opacity 1number도형의 하락 면 투명도 (0 ~ 1)
overcolor'#163f91'string마우스 오버시 도형의 하락 면 색상 (영문컬러명이나 RGB값 입력)
opacity1number마우스 오버시 도형의 하락 면 투명도 (0 ~ 1)

tick.line = {};

도형의 선 스타일.

  • tick.line.normal = { color: '#00ca00', opacity: 1, width: 1, over: { color: '#ca00ca', opacity: 1, width: 1 } };

  • tick.line.up = { color: '#c42c1c', opacity: 1, width: 1, over: { color: '#932216', opacity: 1, width: 1 } };

  • tick.line.down = { color: '#2e80cc', opacity: 1, width: 1, over: { color: '#163f91', opacity: 1, width: 1 } };

Parameters 

     defaulttype설명
tick










line










normal


color '#00ca00'string도형의 일반 선 색상 (영문컬러명이나 RGB값 입력)
opacity 1number도형의 일반 선 투명도 (0 ~ 1)
width 1number도형의 일반 선 두께 (0 ~ )
overcolor '#ca00ca'string마우스 오버시 도형의 일반 선 색상 (영문컬러명이나 RGB값 입력)
opacity1number마우스 오버시 도형의 일반 선 투명도 (0 ~ 1)
width1number마우스 오버시 도형의 일반 선 두께 (0 ~ )
up


color '#c42c1c'string도형의 상승 선 색상 (영문컬러명이나 RGB값 입력)
opacity 1number도형의 상승 선 투명도 (0 ~ 1)
width 1number도형의 상승 선 두께 (0 ~ )
overcolor'#932216'string마우스 오버시 도형의 상승 선 색상 (영문컬러명이나 RGB값 입력)
opacity1number마우스 오버시 도형의 상승 선 투명도 (0 ~ 1)
width1number마우스 오버시 도형의 상승 선 두께 (0 ~ )
down


color '#2e80cc'string도형의 하락 선 색상 (영문컬러명이나 RGB값 입력)
opacity 1number도형의 하락 선 투명도 (0 ~ 1)
width 1number도형의 하락 선 두께 (0 ~ )
overcolor'#163f91'string마우스 오버시 도형의 하락 선 색상 (영문컬러명이나 RGB값 입력)
opacity1number마우스 오버시 도형의 하락 선 투명도 (0 ~ 1)
width1number마우스 오버시 도형의 하락 선 두께 (0 ~ )

Usage

tickMidnighttruejs
var styles = {
	series: {
		s1: {
			tick: {
				style: 'circle',
				size: 3,
				overSize: 2,
				area: {
					normal: {
						color: '#ffffff',
						opacity: 1,
						over: {
							color: '#ffffff',
							opacity: 1
						}
					}
				},
				line: {
					normal: {
						color: '#ff625f',
						opacity: 1,
						over: {
							color: '#465866',
							opacity: 1
						}
					}
				}
			}
		},
		s2: {
			tick: {
				style: 'square',
				size: 3,
				overSize: 2,
				area: {
					normal: {
						color: '#ffffff',

						opacity: 1,

						over: {

							color: '#ffffff',

							opacity: 1

						}

					}

				},
				line: {
					normal: {
						color: '#0093d8',
						opacity: 1,
						over: {
							color: '#465866',
							opacity: 1
						}
					}
				}
			}
		}
	}
}

Demo

TICK