Line Series

3
Overview

Chart Series 중 Line Series (선 시리즈)의 샘플 및 설정.

<!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="../../../lib/comm/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: {
						line: {
							normal: {
								color: 'blue', width: 2,
								over: {
									color: 'blue', width: 2
								}
							}
						}
					}
				}
			}
		};
		var series = {
			"main": {
				"s1": {series: 'line', 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

var defaultStyles = {
	line: {// 선 색상
		// 일반적인 색상
    	normal: { color: '#77bf10', width: 1, opacity: 1, over: { color: '#77bf10', width: 1, opacity: 1 } },
		// 상승, 하락, 기준선 표현을 하고자 할 경우
        up:     { color: '#c42c1c', width: 1, opacity: 1, over: { color: '#c42c1c', width: 1, opacity: 1 } },
        down:   { color: '#2e80cc', width: 1, opacity: 1, over: { color: '#2e80cc', width: 1, opacity: 1 } },
        base: 	{ color: '#000000', width: 1, opacity: 1 }
	},
    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}}  // 하락
		}
	},
    text: { // 막대별 텍스트 출력 유무 및 스타일 정의        
		use: false,         // 사용 유무    [ false : true ]
        family: 'dotum',    // 글꼴 종류
        size: 11,           // 글꼴 크기
        color: '#000000',   // 글꼴 색상
        align: 'center',    // 글자 정렬    [ 'center' : 'left' : 'right' ]
        style: 'normal',    // 글꼴 모양    [ 'normal' : 'bold' : 'italic' ]
        opacity: 1,         // 글자 투명도   [ 1 ~ 0 ]
        format: null,       // 글자 출력 양식
        func: null          // 글자의 위치나 전반적인 모양새를 변경하고자 할 경우
    }
};

색상(선) 변경

Normal Setting

일반적인 선 스타일

Usage

var styles = {
	series: {
		s1: {
			line: {						// 선 Style
				normal: {					// 일반 Style
					color: '#2bcdba', 			// 선 색상 English Color Name, RGB Value
					width: 3,					// 선 두께
					opacity: 1,					// 선 투명도 0~1
					over: {						// 마우스 오버 스타일
						color: '#00a693', 			// 마우스 오버 선 색상 English Color Name, RGB Value
						width: 3,					// 마우스 오버 선 두께
						opacity: 1					// 마우스 오버 선 투명도 0~1
					}
				}				
			}
		}
	}
}

Demo

기본 선

UpDown Setting

Up/Down의 선 색상 이미지

Usage

var styles = {
	series: {
		s1: {
			line: {						// 선 Style
				up: {						// 상승 Style
					color: 'blue', 
					opacity: 1, 
					width: 1,					// Stroke-width number 0 ~ ...
					over: {						// MouseOver시 활성화 되는 선 스타일
						color: '#00fff',
						opacity: 1,
						width: 1
					}
				},
				down: {						// 하락 Style
					color: 'blue', 
					opacity: 1, 
					width: 1,					
					over: {						
						color: '#00fff',
						opacity: 1,
						width: 1
					}
				},
				base: {						// 기준선 Style
					color: '#000', 
					opacity: 1, 
					width: 1,					
					over: {						
						color: 'black',
						opacity: 1,
						width: 1
					}
				}						
			}
		}
	}
}

Demo

상승, 하락 선

form

form : 'normal'

상, 하, 기준 색상 구분 없이 한가지 색상으로 표현(form을 정의하지 않으면 normal 형식으로 표현됨)

form : 'updown'

0을 기준으로 상, 하, 기준 표현

form : 'updown_base'

첫번째 혹은 옵션에 정의한 아이템을 기준으로 큰 아이템은 상, 작은 아이템은 하, 같은 아이템은 보합

기준가격을 설정하는 방법

options.data.prevClose = null 에 기준가격 제시(순수 number 값만 기입) (자세히 보기)
options.data.prevClose 에 제시되어 있지 않으면 첫번째 아이템 기준으로 상, 하가 정해짐

Usage

var options = {
	data: {
		data: [
			{ Date: '20140101', Mprc: 10000 },
			{ Date: '20140102', Mprc: 20000 },
			{ Date: '20140103', Mprc: -15000 },
			{ Date: '20140104', Mprc: -30000 },
			{ Date: '20140105', Mprc: 5000 },
			{ Date: '20140106', Mprc: 10000 },
			{ Date: '20140107', Mprc: 20000 },
			{ Date: '20140108', Mprc: 15000 },
			{ Date: '20140109', Mprc: -15000 },
			{ Date: '20140110', Mprc: -5000 }
		],
		prevClose: 10000
	}
}
var styles = {
	series: {
		s1: {
			line: {
				up: {
					color: '#ff625f', width: 3,
					over: {
						color: '#ca2a27', width: 3
					}
				},
				down: {
					color: '#0093d8', width: 3,
					over: {
						color: '#005fa8', width: 3
					}
				},
				base: {
					color: '#465866', width: 2
				}
			}
		}
	}
}
var series = {
	main: {
		s1: { series: 'line', form: 'updown_base', xaxis: 'Date', yaxis: 'Mprc' }
	}
}

Demo

기준값 상,하

form : 'step'

A포인트에서 B포인트까지 계단형으로 표현

Tick

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

tick.style = null;

도형의 형태

Parameters

value

string

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

tick.size = 3;

도형 크기

Parameters

value

number

도형 크기

tick.overSize = 1;

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

Parameters

value

number

도형 크기의 배수(디폴트는 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

					default	type	설명
tick	area	normal	color		'#00ca00'	string	도형의 일반 면 색상 (영문컬러명이나 RGB값 입력)
			opacity		1	number	도형의 일반 면 투명도 (0 ~ 1)
			over	color	'#ca00ca'	string	마우스 오버시 도형의 일반 면 색상 (영문컬러명이나 RGB값 입력)
			over	opacity	1	number	마우스 오버시 도형의 일반 면 투명도 (0 ~ 1)
		up	color		'#c42c1c'	string	도형의 상승 면 색상 (영문컬러명이나 RGB값 입력)
			opacity		1	number	도형의 상승 면 투명도 (0 ~ 1)
			over	color	'#932216'	string	마우스 오버시 도형의 상승 면 색상 (영문컬러명이나 RGB값 입력)
			over	opacity	1	number	마우스 오버시 도형의 상승 면 투명도 (0 ~ 1)
		down	color		'#2e80cc'	string	도형의 하락 면 색상 (영문컬러명이나 RGB값 입력)
			opacity		1	number	도형의 하락 면 투명도 (0 ~ 1)
			over	color	'#163f91'	string	마우스 오버시 도형의 하락 면 색상 (영문컬러명이나 RGB값 입력)
			over	opacity	1	number	마우스 오버시 도형의 하락 면 투명도 (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

					default	type	설명
tick	line	normal	color		'#00ca00'	string	도형의 일반 선 색상 (영문컬러명이나 RGB값 입력)
			opacity		1	number	도형의 일반 선 투명도 (0 ~ 1)
			width		1	number	도형의 일반 선 두께 (0 ~ )
			over	color	'#ca00ca'	string	마우스 오버시 도형의 일반 선 색상 (영문컬러명이나 RGB값 입력)
				opacity	1	number	마우스 오버시 도형의 일반 선 투명도 (0 ~ 1)
				width	1	number	마우스 오버시 도형의 일반 선 두께 (0 ~ )
		up	color		'#c42c1c'	string	도형의 상승 선 색상 (영문컬러명이나 RGB값 입력)
			opacity		1	number	도형의 상승 선 투명도 (0 ~ 1)
			width		1	number	도형의 상승 선 두께 (0 ~ )
			over	color	'#932216'	string	마우스 오버시 도형의 상승 선 색상 (영문컬러명이나 RGB값 입력)
				opacity	1	number	마우스 오버시 도형의 상승 선 투명도 (0 ~ 1)
				width	1	number	마우스 오버시 도형의 상승 선 두께 (0 ~ )
		down	color		'#2e80cc'	string	도형의 하락 선 색상 (영문컬러명이나 RGB값 입력)
			opacity		1	number	도형의 하락 선 투명도 (0 ~ 1)
			width		1	number	도형의 하락 선 두께 (0 ~ )
			over	color	'#163f91'	string	마우스 오버시 도형의 하락 선 색상 (영문컬러명이나 RGB값 입력)
				opacity	1	number	마우스 오버시 도형의 하락 선 투명도 (0 ~ 1)
				width	1	number	마우스 오버시 도형의 하락 선 두께 (0 ~ )

Usage

var styles = {
	series: {
		s1: {
			line: {                
				normal: {
                    color: '#2bcdba', width: 3,
                    over: {
                        color: '#2bcdba', width: 3
                    }
                }
            },
            tick: { // 틱 설정
                style: 'circle',    // 틱 종류
                size: 5,            // 틱 크기
                overSize: 1.5,      // 틱을 MouseOver 했을 때 변하는 크기 배수
                area: {
                    normal: {
                        color: '#fff', over: {color: '#fff'}
                    }
                },
                line: {
                    normal: {
                        color: '#2bcdba', width: 3, over: {color: '#465866', width: 3}
                    }
                }
            }
		}
	}
}

Demo

TICK

제품

자료

가격/구매

고객지원

Line Series

3
Overview

Demo

Configuration Styles

색상(선) 변경

Normal Setting

Usage

Demo

UpDown Setting

Usage

Demo

form

form : 'normal'

form : 'updown'

form : 'updown_base'

Usage

Demo

form : 'step'

Tick

tick.style = null;

Parameters

tick.size = 3;

Parameters

tick.overSize = 1;

Parameters

tick.area = {};

Parameters

tick.line = {};

Parameters

Usage

Demo

Line Series

3Overview

Demo

Configuration Styles

색상(선) 변경

Normal Setting

Usage

Demo

UpDown Setting

Usage

Demo

form

form : 'normal'

form : 'updown'

form : 'updown_base'

Usage

Demo

form : 'step'

Tick

tick.style = null;

Parameters

tick.size = 3;

Parameters

tick.overSize = 1;

Parameters

tick.area = {};

Parameters

tick.line = {};

Parameters

Usage

Demo

3
Overview