Highchart 기본 사용법

작성일 Edited on In , Views: Disqus:

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

설치

1
2
3
4
# npm
$ npm install highcharts --save
# yarn
$ yarn add highcharts

highcharts.min.js와 modules/exporting.js, themes/grid-light.js 를 가져온다.
아니면 CDN을 사용해도 된다.

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
Highcharts.setOptions({
  lang: {
    // 전체보기 버튼을 한글로 바꾼다
    resetZoom: '전체보기',
  },
});

var chartCallback = function (data) {
  var chart = $('#chart').highcharts();

  if (chart) {
    // 차트가 있을경우 제거한다.
    chart.destroy();
  }

  if (data) {
    var categoriesData = []; // 여기에 x축 데이터를 넣는다.
    var seriesData = {}; // 여기에 data를 파싱해 y축 구조를 만들어준다.

    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://gracefullight.github.io', // 로고 클릭시 URL
      },
      tooltip: {
        // hover시 나오는 tooltip
        shared: true, // 하나의 영역을 공유
        pointFormatter: function () {
          if (this.y >= 0) {
            // 표시되는 tooltip을 마음대로 설정
            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.Chart를 사용해야한다.
categories 와 series 의 모양을 만들어줄 때는 lodash 를 사용해야 편하다.

결과

대안

  • Chart.js
  • E Charts
  • tui Chart
  • Chartist.js