[javascript] Highcharts에서 도넛 차트 만들기
Highcharts는 웹 기반 데이터 시각화를 위해 널리 사용되는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 차트를 생성할 수 있으며, 이 중에서도 도넛 차트는 매우 인기 있는 유형 중 하나입니다.
이번 예제에서는 Highcharts를 사용하여 간단한 도넛 차트를 만들어보겠습니다.
1. Highcharts 라이브러리 추가하기
먼저 highcharts.js 파일을 다운로드하거나 CDN을 통해 추가해야 합니다. 다음은 CDN을 통해 Highcharts를 추가하는 예입니다.
<script src="https://code.highcharts.com/highcharts.js"></script>
2. HTML 요소 준비하기
도넛 차트를 표시할 HTML 요소를 준비해야 합니다. 예를 들어 <div> 요소를 사용하여 도넛 차트를 감싸는 컨테이너를 만들 수 있습니다.
<div id="donut-chart"></div>
3. JavaScript 코드 작성하기
이제 Highcharts를 사용하여 도넛 차트를 그리는 JavaScript 코드를 작성해보겠습니다. 아래는 간단한 데이터를 사용하여 도넛 차트를 생성하는 예입니다.
// 도넛 차트 데이터
var data = [
['A', 20],
['B', 30],
['C', 50]
];
// 도넛 차트 생성
Highcharts.chart('donut-chart', {
chart: {
type: 'pie'
},
title: {
text: '도넛 차트 예제'
},
plotOptions: {
pie: {
innerSize: '50%'
}
},
series: [{
name: 'Data',
data: data
}]
});
4. 결과 확인하기
이제 HTML 파일을 브라우저에서 열어 결과를 확인할 수 있습니다. 도넛 차트가 표시되고 각 데이터의 레이블과 비율이 표시될 것입니다.