HORIZON CHART 의 전반적인 설정에 대한 값을 정의 하는 곳으로
데이터, 데이터들의 표현 형식, 시계열 적용, Tool Tip 등의 설정을 합니다.
var defaultOptions = { data : { data : null, url: '', type: 'json', reverse: false, jsonDepth: 'output.result', use : '' }, xAxis : { select : '', format : null }, yAxis : { select : '', format : null }, toolTip : { use : true, className : null, position : { x : -90, y : -90 }, func : null }, timeSlice : { use : false, delay : 500, animate : { use : false, type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut|none */ speed : 200 }, slider : null, play : null, pause : null, stop : null, data : function (data) { } }, resize : { use : false } }
URL이 아닌 JSON 데이터가 바로 입력될 경우에 사용
datas | array | JSON DATA가 들어간 배열 |
var options = { data : { data : [ {date: '20120101', data1: 1200, data2: 300, data3: 900, data4: 350 }, {date: '20120102', data1: 800, data2: 400, data3: 700, data4: 300 }, {date: '20120103', data1: 900, data2: 200, data3: 800, data4: 400 }, {date: '20120104', data1: 800, data2: 250, data3: 600, data4: 200 }, {date: '20120105', data1: 1100, data2: 150, data3: 1100, data4: 150 }, {date: '20120106', data1: 600, data2: 200, data3: 800, data4: 250 }, {date: '20120107', data1: 800, data2: 400, data3: 900, data4: 200 }, {date: '20120108', data1: 700, data2: 300, data3: 800, data4: 400 }, {date: '20120109', data1: 900, data2: 350, data3: 1200, data4: 300 } ] } }
Horizon chart 에 사용할 데이터 주소
value | string | 데이터 주소(AJAX로 호출) |
var options = { data: { url: 'http://www.cyber-i.com/' } }
Horizon chart 에 사용할 데이터 타입
value | string | 데이터 타입 ["json", "text"] |
var options = { data: { type: 'json' } }
value | boolean | 데이터의 정렬이 내림차순이 아닌 오름차순으로 들어올 경우 사용 [false, true] |
var options = { data: { reverse: false } }
json 데이터에 깊이가 있는 경우
value | string | 실제 데이터가 있는 곳까지 '.' 로 연결 |
var options = { data: { jsonDepth: 'output.result' } }
// DATA RESULT { output: { result: [ {date: '20120101', data1: 1200, data2: 300, data3: 900, data4: 350 }, {date: '20120102', data1: 800, data2: 400, data3: 700, data4: 300 }, {date: '20120103', data1: 900, data2: 200, data3: 800, data4: 400 }, {date: '20120104', data1: 800, data2: 250, data3: 600, data4: 200 }, {date: '20120105', data1: 1100, data2: 150, data3: 1100, data4: 150 }, {date: '20120106', data1: 600, data2: 200, data3: 800, data4: 250 }, {date: '20120107', data1: 800, data2: 400, data3: 900, data4: 200 }, {date: '20120108', data1: 700, data2: 300, data3: 800, data4: 400 }, {date: '20120109', data1: 900, data2: 350, data3: 1200, data4: 300 } ] } }
x 축의 값을 결정하는 데이터
value | string | X 축의 값을 결정하는 데이터 |
var options = { xAxis: { select: 'date' } }
X 축 텍스트 Formatting
formatter | function | X 축 데이터 출력 형식 정의
|
value | string | 출력 형식이 적용된 텍스트 |
var options = { xAxis: { format: function(data){ var formatData = 'ex' + data; return formatData ; } } }
Y 축의 값을 결정하는 데이터
value | type | 설명 | |||
---|---|---|---|---|---|
yAxis | select | s1 | 'data1' | string |
Horizon Chart 에서 각각의 시리즈에 Y 축 값을 결정하는 데이터로 select.s 의 숫자를 늘릴 수록 시리즈는 늘어난다. yAxis.select.s[1++] |
s2 | 'data2' | string | |||
s3 | 'data3' | string | |||
s4 | 'data4' | string | |||
s··· |
value | string | Y 축의 값을 결정하는 데이터 |
var options = { yAxis: { select: { s1 : 'data1', s2 : 'data2', s3 : 'data3', s4 : 'data4' } } }
Y 축 텍스트 Formatting
formatter | function | Y 축 데이터 출력 형식 정의
|
value | string | 출력 형식이 적용된 텍스트 |
var options = { yAxis: { format: function(data){ var formatData = 'ex' + data; return formatData ; } } }
툴팁의 사용 여부 결정
value | boolean | 툴팁의 사용 여부 |
var options = { toolTip: { use: true } }
툴팁의 class 명 지정
value | string | 툴팁의 class 명 지정 |
var options = { toolTip: { className: 'tip' } }
툴팁의 X,Y 좌표 설정
value | object | 툴팁의 X,Y 좌표 설정 |
var options = { toolTip: { position: { x : 20, y : 20 } } }
툴팁 관련 function
tipfunction | function | 출력 데이터 및 css 를 변경을 할 수 있음.
|
var options = { toolTip: { func: function(tipElement, data){ tip.html( '날짜 : ' + data.date + '<br/>데이터 : ' + data.gap ); tip.css({color : 'gray'}); } } }
시계열의 사용 여부 결정
value | boolean | 시계열의 사용 여부 |
var options = { timeSlice: { use: true } }
시계열 재생시 그려지는 속도
value | number | setTimeout 함수에 쓰여지는 interval과 동일(밀리초 단위) |
시계열 jQuery UI - Slider
element | dom | Slider로 사용할 jQuery selector |
시계열 재생버튼
element | dom | 재생버튼으로 사용할 jQuery selector |
시계열 일시정지버튼
element | dom | 일시정지버튼으로 사용할 jQuery selector |
시계열 정지버튼
element | dom | 정지버튼으로 사용할 jQuery selector |
시계열의 animate 사용 여부 결정
value | boolean | 시계열의 animate 사용 여부 |
var options = { timeSlice: { animate : { use : true } } }
시계열의 animate type
value | string |
|
var options = { timeSlice: { animate: { type: 'linear' } } }
시계열 jQuery UI - slider 위치에 대한 데이터
sliderfunction | function | 차트에서 사용하는 슬라이더는 thumb가 2개이다. thumb[0] 에서부터 thumb[1] 까지 사이의 데이터를 넘겨받는다. |
var options = { timeSlice: { delay: 300, slider: $('#slider'), play: $('#playBtn'), pause: $('#pauseBtn'), stop: $('#stopBtn'), data: function(data){ $('#info').text(data[0].date + '~' + data[data.length - 1].date); } } }
resize 이벤트 사용 여부 결정
value | boolean | resize 이벤트사용 여부 결정
|
var options = { resize: { use : true } }