[javascript] Highcharts에서 라인 차트 만들기
Highcharts는 JavaScript로 작성된 강력한 차트 라이브러리입니다. 이 라이브러리를 사용하면 라인 차트와 같은 다양한 종류의 차트를 손쉽게 만들 수 있습니다. 이번에는 Highcharts를 사용하여 라인 차트를 만드는 방법에 대해 알아보겠습니다.
1. Highcharts 설치하기
먼저 Highcharts를 사용하기 위해 해당 라이브러리를 설치해야 합니다. 다음 명령을 통해 npm을 이용하여 Highcharts를 설치할 수 있습니다.
npm install highcharts
2. HTML 파일에 Highcharts 스크립트 추가하기
먼저 HTML 파일에 Highcharts 스크립트를 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 Highcharts를 로드할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Highcharts 라인 차트 예제</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="chartContainer"></div>
<script>
// Highcharts 차트 생성 코드를 작성합니다.
</script>
</body>
</html>
3. Highcharts 라인 차트 생성하기
라인 차트를 생성하기 위해 JavaScript 코드 블록 안에 다음과 같이 Highcharts 함수를 호출합니다.
<script>
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('chartContainer', {
title: {
text: '월별 판매량'
},
xAxis: {
categories: ['1월', '2월', '3월', '4월', '5월', '6월']
},
yAxis: {
title: {
text: '판매량'
}
},
series: [{
name: '제품 A',
data: [100, 200, 150, 300, 250, 400]
}, {
name: '제품 B',
data: [80, 150, 120, 200, 180, 250]
}]
});
});
</script>
위의 코드에서는 ‘월별 판매량’이라는 제목을 가진 라인 차트를 생성하고 있습니다. x축에는 월별 카테고리를, y축에는 ‘판매량’이라는 제목을 가진 축을 설정하였습니다. 또한 ‘제품 A’와 ‘제품 B’의 판매량 데이터를 시리즈로 추가하였습니다.
4. 결과 확인하기
위의 코드를 작성하고 HTML 파일을 열면 브라우저에서 라인 차트를 볼 수 있습니다. 이제 개발 환경에 맞게 차트를 스타일링하고 추가적인 설정을 적용하여 원하는 라인 차트를 만들 수 있습니다.
이상으로 Highcharts를 사용하여 라인 차트를 만드는 방법에 대해 알아보았습니다. Highcharts에는 다양한 기능과 옵션들이 포함되어 있으므로 공식 문서나 예제 코드를 참고하여 더 다양한 차트를 만들어보세요.