[javascript] Highcharts 설치 방법
Highcharts는 웹에서 인터랙티브한 차트를 구현할 수 있는 자바스크립트 라이브러리입니다. 이번 포스트에서는 Highcharts를 설치하는 방법을 알아보겠습니다.
npm을 통한 설치
Highcharts를 사용하기 위해 먼저 Node.js와 npm이 설치되어있어야 합니다.
npm install highcharts
위 명령어를 터미널에서 실행하면 Highcharts가 프로젝트에 추가됩니다.
다운로드
Highcharts를 다운로드하여 직접 프로젝트에 추가할 수도 있습니다. Highcharts 공식 웹사이트에서 최신 버전의 Highcharts를 다운로드 받아주세요. 다운로드한 파일을 프로젝트 폴더에 압축풀거나 필요한 위치로 이동시키면 됩니다.
CDN 사용
Highcharts를 CDN을 통해 사용할 수도 있습니다. 아래 코드를 HTML 파일의 <head> 태그 안에 추가해주세요.
<script src="https://code.highcharts.com/highcharts.js"></script>
이렇게 하면 웹 페이지에서 Highcharts를 사용할 수 있습니다.
설치 확인
설치가 제대로 되었는지 확인하기 위해 간단한 예제를 작성해보겠습니다. 아래 코드를 HTML 파일에 추가해주세요.
<div id="chart-container"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
// 차트 생성
Highcharts.chart('chart-container', {
chart: {
type: 'line'
},
title: {
text: 'Monthly Average Temperature'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (°C)'
}
},
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}]
});
</script>
위 코드는 간단한 선 그래프를 생성하는 예제입니다. 웹 페이지를 열어서 차트가 제대로 표시되는지 확인해보세요.