Highcharts 도넛 차트란?
Highcharts에서 도넛(Donut) 차트를 만들려면 일반 파이 차트와 달리 innerSize 옵션을 설정해야 합니다. innerSize는 차트 중앙의 빈 공간 크기를 결정하며, 이 값을 지정하면 가운데가 뚫린 도넛 형태의 차트가 완성됩니다.
데이터 입력 방식
도넛 차트의 데이터는 각 항목을 이름과 값으로 담은 2개 요소의 배열 형태로 제공합니다. 그리고 innerSize 속성을 설정하면 도넛 스타일이 적용됩니다.
필요한 주요 파라미터는 다음과 같습니다.
...
data: [["Audi",4],["Benz",6],["Jaguar",9]],
innerSize: '30%',
...
전체 시리즈 설정 코드
차트의 크기(size)와 내부 크기(innerSize)를 함께 설정한 전체 코드 예시는 아래와 같습니다.
series: [{
name: Cars,
data: [["Audi",4],["Benz",6],["Jaguar",9]],
size: '50%',
innerSize: '30%',
showInLegend: true,
dataLabels: {
enabled: false
}
}]주요 옵션 설명
- size: 차트 전체의 외경(바깥 지름)을 백분율 또는 픽셀 단위로 지정합니다.
- innerSize: 중앙 빈 공간의 크기를 지정합니다. 값이 클수록 도넛의 두께가 얇아집니다.
- showInLegend: 범례에 데이터 항목을 표시할지 여부를 결정합니다.
- dataLabels.enabled: 데이터 레이블 표시 여부를 설정합니다. 위 예시에서는 비활성화되어 있습니다.
이처럼 size와 innerSize 두 가지 옵션만 조절하면 간단하게 원하는 두께의 도넛 차트를 구현할 수 있습니다.