2. Chart Reference

Ready

CHART는 기본적으로 jQuery selector, options, styles, series로 이루어진다.

변수명은 아무것이나 써도 무방하나 init 할때 들어가는 변수의 속성들의 순서는 같아야 한다.

ReadyMidnighttruejs
var options = {};
var styles = {};
var series = {};
var chart = webponent.chart.init($('jQuery Selector'), options, styles, series);

OPTIONS Setting

data, format, 툴팁, 애니메이션 설정, 각종 설정 사용 유무, 시계열(TimeSlice) 등 차트에 전반적인 영향을 주는 항목들을 적는다. (자세히보기)

ReadyMidnighttruejs
var options = {
	data: {...},
	format: {...},
	func: {...},
	timeSlice: {...},
	use: {...},
	animate: {...},
	division: null
};

STYLES Setting

차트의 색상, 형태, 글꼴 등 디자인적인 요소들을 설정한다. (자세히보기)

ReadyMidnighttruejs
var styles = {
	main: {
		layout: {...},
		graph: {...},
		yAxis: {...},
		xAxis: {...},
		crossLine: {...},
		tip: {...}
	}
};

SERIES Setting

차트를 구성하는 차트시리즈의 종류, 형식, X축 데이터와 Y축 데이터를 매칭시켜준다. (자세히보기)

ReadyMidnighttruejs
var series = {
	main: { // 필수 MAIN
		series: { 
			series: '차트시리즈 종류', 
			form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', 
			xaxis: 'X축 데이터 KEY', 
			yaxis: 'Y축 데이터 KEY'
		}
	}
};
Ready-캔들,HLOCMidnighttruejs
var series = {
	main: { // 필수 MAIN
		series: { 
			series: '차트시리즈 종류', 
			xaxis: 'X축 데이터 KEY', 
			open: '시가 데이터 KEY',
			high: '고가 데이터 KEY',
			low: '저가 데이터 KEY',
			close: '종가 데이터 KEY'
		}
	}
};

type = 'main';

차트 영역 중 메인과 서브로 나뉠때를 위해 구분짓는 설정.

메인 하나만 만들경우 적어주지 않아도 된다. 

메인 영역의 시리즈 설정에는 type = 'main'; 을 적지 않아도 되지만 서브영역의 시리즈 설정에는 필수로 type = 'sub';를 기입하여야 한다. 

Parameters

valuestring[ 'main', 'sub' ]

시리즈 KEY = {};

하나의 시리즈에 대한 시리즈 종류, 형식, X축 데이터 키, Y축 데이터 키를 설정한다.

  • series: '...';
  • form: '...';
  • xaxis: '...';
  • yaxis: '...';

Parameters

 defaulttype설명
series''string(필수) 'column', 'line', 'bar', 'area', 'candle', 'hloc', 'plot'
form''string

(선택) 'updown', 'updown_base', 'stack'..등 각 시리즈별로 정의할수 있는 form은 각각 다르다.

기본(일반)형이면 적지 않는다.

xaxis''number

(필수) X축으로 사용할 데이터의 KEY NAME

메인과 서브로 분리될 경우 xaxis의 데이터 KEY NAME은 동일해야 한다.

yaxis''string(필수) Y축으로 사용할 데이터의 KEY NAME
ReadyMidnighttruejs
var series = {
	main: {
		type : 'main 혹은 sub',
		시리즈 KEY: { 
			series: '차트시리즈 종류', 
			form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', 
			xaxis: 'X축 데이터 KEY', 
			yaxis: 'Y축 데이터 KEY'
		}
	}
};

Important

Series와 Styles의 설정 중 필수로 적용되어야 하는 사항

series에 적용된 '차트 메인과 서브를 구분할 KEY'와 '시리즈 KEY'는

styles의 series 안에 동일하게 적용되야 한다.

Only MAIN

ReadyMidnighttruejs
var styles = {
	main: {
		series: {
			시리즈 KEY: { }
		}
	}
};
var series = {
	main: {
		type : 'main', // 적지 않아도 되는 설정
		시리즈 KEY: { 
			series: '차트시리즈 종류', 
			form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', 
			xaxis: 'X축 데이터 KEY', 
			yaxis: 'Y축 데이터 KEY'
		}
	}
}; 

MAIN + SUB

메인에 서브를 더할 경우 사용.

서브의 갯수는 몇개이든 상관이 없으나 webponent.chart.js 내부에는 3개까지 높이 설정이 기본으로 세팅되어 있으며

4개 이상을 사용시에는 options의 division을 따로 설정해 주어야 한다. (자세히보기)

ReadyMidnighttruejs
var styles = {
	main: {
		series: {
			시리즈 KEY: { }
		}
	},
	차트 메인과 서브를 구분할 KEY: {
		series: {
			시리즈 KEY: { }
		}
	}
};
var series = {
	main: {
		type : 'main', // 메인이면 적지 않아도 되는 설정
		시리즈 KEY: { 
			series: '차트시리즈 종류', 
			form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', 
			xaxis: 'X축 데이터 KEY', 
			yaxis: 'Y축 데이터 KEY'
		}
	},
	차트 메인과 서브를 구분할 KEY: {
		type : 'sub', // SUB로 사용하려면 필수
		시리즈 KEY: { 
			series: '차트시리즈 종류', 
			form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', 
			xaxis: 'X축 데이터 KEY', // (차트 메인과 서브를 구분할 KEY 1)의 xaxis에 적힌 key와 같아야 한다.
			yaxis: 'Y축 데이터 KEY'
		}
	}
}; 

Demo

MAIN + SUB 예시