Highcharts는 HTML5 기반의 자바스크립트 라이브러리로, 다양한 종류의 차트와 그래프를 만들 수 있습니다. 이번에는 Highcharts를 사용하여 파이 차트를 만드는 방법에 대해 알아보겠습니다.
Highcharts 다운로드와 설정
먼저 Highcharts를 다운로드하고 HTML 문서에 추가하는 작업이 필요합니다. Highcharts의 최신 버전은 Highcharts 공식 웹사이트에서 다운로드할 수 있습니다. 다운로드한 파일을 원하는 디렉토리에 저장한 후, HTML 문서의 <head> 태그 안에 다음 코드로 Highcharts를 포함시킬 수 있습니다.
<script src="path/to/highcharts.js"></script>
파이 차트 생성하기
파이 차트를 생성하기 위해 Highcharts에서 제공하는 여러 옵션 중 일부를 설정해야 합니다.
예를 들어, 다음과 같이 파이 차트를 생성할 수 있습니다.
// 차트 데이터 정의
var data = [
{ name: "사과", y: 30 },
{ name: "바나나", y: 25 },
{ name: "체리", y: 15 },
{ name: "오렌지", y: 10 },
{ name: "포도", y: 20 }
];
// 차트 옵션 설정
var options = {
chart: {
type: 'pie'
},
title: {
text: '과일 판매량'
},
series: [{
name: '판매량',
data: data
}]
};
// 차트 생성
Highcharts.chart('chart-container', options);
위의 코드에서 차트 데이터는 data 배열에 객체 형태로 정의되어 있습니다. 각 객체는 name과 y 속성을 가지고 있으며, name은 항목의 이름을, y는 항목의 값(판매량)을 나타냅니다.
또한, options 객체를 통해 차트의 종류, 제목 등을 설정할 수 있습니다. 위의 예제에서는 차트의 종류를 pie로 설정하고, 제목을 ‘과일 판매량’으로 설정하였습니다.
마지막으로, Highcharts.chart() 함수를 호출하여 차트를 생성합니다. 첫 번째 인자는 차트를 생성할 요소의 ID를 나타내며, 위의 예제에서는 ‘chart-container’라는 ID를 가진 요소에 차트를 생성하도록 설정하였습니다.
결과 확인하기
위의 코드를 HTML 문서에 추가하고 브라우저로 열어보면 파이 차트가 제대로 표시되는 것을 확인할 수 있습니다.
다양한 옵션을 설정하여 차트의 디자인이나 동작 방식을 조정할 수 있으며, Highcharts의 공식 문서에서 자세한 내용을 확인할 수 있습니다.
이렇게 Highcharts를 사용하여 파이 차트를 만들 수 있습니다. 다음 포스트에서는 Highcharts를 사용하여 다른 종류의 차트를 만드는 방법에 대해 알아보겠습니다.
참고 문서: