Highchart 기본 사용법
D3.js 로 그래프를 만들 수 있지만 더 사용성이 좋은 highchart 로 데이터를 시각화해보자
설치
1 | # npm |
highcharts.min.js와 modules/exporting.js, themes/grid-light.js 를 가져온다.
아니면 CDN을 사용해도 된다.
1 | <script src="/bower_components/highcharts/highcharts.js"></script> |
기본 예제
홈페이지에 나와있는 예제는 다음과 같다.
- title : 제목
- subtitle : 소제목
- xAxis : X 축
- YAxis : Y 축
- tooltip : Y 축의 제목
- legend : X 축의 범례
- series : 차트 데이터
기본 예제로도 차트를 만들 수 있지만 업무에 사용하려면 비동기로 데이터가 갱신될 때마다 차트도 다시 그려져야한다.
세부 옵션은 API 문서를 참조하자.
Redraw 예제
div#chart에 차트를 그린다고 가정한다.
소스
1 | Highcharts.setOptions({ |
redraw 를 이용할 때 new Highcharts.Chart
를 사용해야한다.
categories 와 series 의 모양을 만들어줄 때는 lodash 를 사용해야 편하다.
결과

대안
- Chart.js
- E Charts
- tui Chart
- Chartist.js