Graceful Light

Highchart 기본 사용법

2017-01-08


D3.js로 그래프를 만들 수 있지만 더 사용성이 좋은 highchart로 데이터를 시각화해보자

설치

1
2
3
4
# npm
$ npm install highcharts --save
# bower
$ bower install highcharts

highcharts.min.js와 modules/exporting.js, themes/grid-light.js를 가져온다.

1
2
3
<script src="/bower_components/highcharts/highcharts.js"></script>
<script src="/bower_components/highcharts/modules/exporting.js"></script>
<script src="/bower_components/highcharts/themes/grid-light.js"></script>

기본 예제

홈페이지에 나와있는 예제는 다음과 같다.

  • title : 제목
  • subtitle : 소제목
  • xAxis : X축
  • YAxis : Y축
  • tooltip : Y축의 제목
  • legend : X축의 범례
  • series : 차트 데이터

기본 예제로도 차트를 만들 수 있지만 업무에 사용하려면 비동기로 데이터가 갱신될 때마다 차트도 다시 그려져야한다.
세부 옵션은 API문서를 참조하자.

Redraw 예제

div#chart에 차트를 그린다고 가정한다.

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
Highcharts.setOptions({
lang:{ resetZoom:"전체보기" }
});
var chartCallback = function(data){
var chart = $('#chart').highcharts();
if(chart){
chart.destroy(); // 차트가 있을경우 제거한다.
}
if(data){
var categoriesData = []; // 여기에 x축을 처리해야한다.
var seriesData = {}; // 여기에 data를 파싱해 구조를 만들어준다.
var options = {
chart:{
renderTo:'chart', // 다시 그려질 영역 설정
zoomType: 'x', // X축이 줌인이 가능하게 설정
panning: true,
panKey: 'shift'
},
title:{
text:null
},
xAxis:{
categories:categoriesData
},
yAxis:{
min:0, // 0이상의 값만 표기
allowDecimals: false, // 정수로만 표기
title:{
text:null
},
labels:{}
},
credits: {
text: 'Graceful Light', // 로고 표시
href:'https://brendaniel.github.io' // 로고 클릭시 URL
},
tooltip:{
shared: true,
pointFormatter:function(){
if(this.y>=0){
return '<span style="color:'+this.series.color+';">●</span> '+this.series.name+': '+'<b>'+Utils.comma(this.y)+'</b><br/>';
}
}
},
plotOptions: {
column: {
pointPadding:0.2,
borderWidth:0
}
},
legend: {
borderWidth:0
},
series : seriesData
};
chart = new Highcharts.Chart(options);
chart.redraw();
}else{
$('#chart').html('no data');
}
};

redraw를 이용할 때 new Highcharts를 사용해야한다.
categories와 series의 모양을 만들어줄 때는 lodash를 사용해야 편하다.

결과

🍺

Buy me a beer 🍗

공유하려면 QR코드를 스캔해주세요