[3분] Highchart 사용해보기(1)
데이터 시각화 툴 중 가장 간편한 highchart의 기본기
웹 기반의 가장 대표적인 시각화 라이브러리는 D3.js다. 많은 웹 개발자들과 디자이너들이 높은 자유도를 갖고 있는 D3.js를 활용해 효율적으로 데이터를 전달한다. Three.js, Chart.js, Metric-Graphics, Recharts, Raphael 등 많은 라이브러리가 있지만 가장 많이 사용되는 것은 여전히 D3.js다.
하지만 D3.js는 자유도가 높은 만큼 배우기 어렵다는 단점이 있다. 이 부분에서 highchart는 굉장히 매력적이다. 자바스크립트를 어느 정도 사용해보았다면 highchart로 간단한 그래프를 그리는 데는 채 10분이 걸리지 않는다.
Hichart의 기본 스크립트
highchart를 사용하기 위해서는 다른 라이브러리와 마찬가지로 CDN으로 외부에서 스크립트를 불러오거나 로컬(본인의 컴퓨터)에서 직접 불러와야 한다.
highchart에서 사용하는 스크립트는 크게 아래 네 가지다.
1. <script src="https://code.highcharts.com/highcharts.js"></script>
위의 스크립트는 기본적인 highchart의 기능을 모두 담고 있다.
*필수적으로 불러와야 한다.
2. <script src="https://code.highcharts.com/modules/series-label.js"></script>
데이터에 라벨을 붙이기 위한 스크립트로 라벨링을 해야 하는 경우 필수적으로 불러와야 한다.
3. <script src="https://code.highcharts.com/modules/exporting.js"></script>
highchart로 생성한 그래프를 jpg, png 등의 이미지 확장자로 다운로드할 수 있게 만든 스크립트이다.
4. <script src="https://code.highcharts.com/modules/export-data.js"></script>
highchart로 그래프를 생성할 때 사용한 데이터 파일을 csv 등의 확장자로 다운로드할 수 있게 만든 스크립트이다. 외부 사용자들이 데이터를 다운로드할 있게 하는 경우에만 사용한다.
정리하자면 1번, 2번 스크립트는 필수적으로 호출하며, 3번과 4번은 해당 기능이 필요한 경우에 부가적으로 호출하면 된다.
Hichart를 그리기 위해서 태그에 id 부여하기
Highchart로 그래프를 그리기 위해서는 태그에 id값을 부여해야 한다. CSS 선택자를 위해서 id값을 입력하는 것과 똑같다.
예) <div id="graph-container-01"></div>
* highchart로 그릴 그래프의 너비와 폭은 id값을 부여받은 태그의 값을 상속받는다. 따라서 CSS 코드에서 해당 id의 width와 min, max height값을 미리 정하여주는 것이 좋다.
예) #graph-container-01 {
width:300px;
height:500px;
}
이제 별도의 스크립트 파일을 만들고 highchart의 docs를 활용해서 그래프를 그려보자.
highchart의 JSfiddle 예시를 조금 수정하였다.
Highcharts.chart('graph-container-01', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, ],
});
위트 코드를 입력하면, 아래와 같은 그래프가 그려진다.
Title, Subtitle 등의 객체와 속성 값은 쉽게 이해할 수 있을 것이다. Series만 살펴보자.
기본적으로 Series에는 데이터 셋을 넣는다. 현재 들어간 데이터 셋은 하나로 이름은 'Installation'이고 값은 배열 형태로 [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]를 갖고 있다.
만약 라인을 하나 더 그리고 싶다면 하나 더 추가를 하면 된다. 아래와 같이.
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
추가로 본래는 그래프 타입을 따로 입력해야 하지만, 본 예제에는 없다.
그 이유는 디폴트로 라인 차트를 지원하기 때문.
다른 그래프 형태는 다음 포스팅에서 더 깊게 다루도록 하겠다.
본 예제의 원본을 보고 싶다면 아래 JS fiddle을 참고하기 바란다.
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/
