CHART는 기본적으로 jQuery selector, options, styles, series로 이루어진다.
변수명은 아무것이나 써도 무방하나 init 할때 들어가는 변수의 속성들의 순서는 같아야 한다.
var options = {}; var styles = {}; var series = {}; var chart = webponent.chart.init($('jQuery Selector'), options, styles, series);
data, format, 툴팁, 애니메이션 설정, 각종 설정 사용 유무, 시계열(TimeSlice) 등 차트에 전반적인 영향을 주는 항목들을 적는다. (자세히보기)
var options = { data: {...}, format: {...}, func: {...}, timeSlice: {...}, use: {...}, animate: {...}, division: null };
차트의 색상, 형태, 글꼴 등 디자인적인 요소들을 설정한다. (자세히보기)
var styles = { main: { layout: {...}, graph: {...}, yAxis: {...}, xAxis: {...}, crossLine: {...}, tip: {...} } };
차트를 구성하는 차트시리즈의 종류, 형식, X축 데이터와 Y축 데이터를 매칭시켜준다. (자세히보기)
var series = { main: { // 필수 MAIN series: { series: '차트시리즈 종류', form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', xaxis: 'X축 데이터 KEY', yaxis: 'Y축 데이터 KEY' } } };
var series = { main: { // 필수 MAIN series: { series: '차트시리즈 종류', xaxis: 'X축 데이터 KEY', open: '시가 데이터 KEY', high: '고가 데이터 KEY', low: '저가 데이터 KEY', close: '종가 데이터 KEY' } } };
차트 영역 중 메인과 서브로 나뉠때를 위해 구분짓는 설정.
메인 하나만 만들경우 적어주지 않아도 된다.
메인 영역의 시리즈 설정에는 type = 'main'; 을 적지 않아도 되지만 서브영역의 시리즈 설정에는 필수로 type = 'sub';를 기입하여야 한다.
value | string | [ 'main', 'sub' ] |
하나의 시리즈에 대한 시리즈 종류, 형식, X축 데이터 키, Y축 데이터 키를 설정한다.
default | type | 설명 | |
---|---|---|---|
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 |
var series = { main: { type : 'main 혹은 sub', 시리즈 KEY: { series: '차트시리즈 종류', form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', xaxis: 'X축 데이터 KEY', yaxis: 'Y축 데이터 KEY' } } };
Series와 Styles의 설정 중 필수로 적용되어야 하는 사항
series에 적용된 '차트 메인과 서브를 구분할 KEY'와 '시리즈 KEY'는
styles의 series 안에 동일하게 적용되야 한다.
var styles = { main: { series: { 시리즈 KEY: { } } } }; var series = { main: { type : 'main', // 적지 않아도 되는 설정 시리즈 KEY: { series: '차트시리즈 종류', form: '차트시리즈 형식 - 기본(일반)형이면 적지 않는다.', xaxis: 'X축 데이터 KEY', yaxis: 'Y축 데이터 KEY' } } };
메인에 서브를 더할 경우 사용.
서브의 갯수는 몇개이든 상관이 없으나 webponent.chart.js 내부에는 3개까지 높이 설정이 기본으로 세팅되어 있으며
4개 이상을 사용시에는 options의 division을 따로 설정해 주어야 한다. (자세히보기)
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' } } };