도넛 차트는 데이터를 시각적으로 표현하는데 자주 사용되는 그래프입니다. 이번 포스트에서는 JavaScript 라이브러리인 Chartist를 사용하여 도넛 차트를 그리는 방법을 알아보겠습니다.

Chartist 설치하기

먼저 Chartist를 사용하기 위해 npm을 통해 설치해야 합니다. 다음 명령을 터미널에서 실행하여 Chartist를 설치할 수 있습니다.

npm install chartist

도넛 차트 그리기

다음은 Chartist를 사용하여 도넛 차트를 그리는 간단한 예제 코드입니다.

// Chartist 라이브러리 가져오기
import Chartist from 'chartist';

// 도넛 차트 데이터 정의
const data = {
  labels: ['Apple', 'Banana', 'Cherry'],
  series: [20, 30, 50]
};

// 도넛 차트 옵션 정의
const options = {
  donut: true,
  donutWidth: 60,
  donutSolid: true,
  startAngle: 270,
  total: 100
};

// 도넛 차트 그리기
new Chartist.Pie('.chart-container', data, options);

위 코드에서 data 객체는 도넛 차트에 표시될 라벨과 해당 데이터를 정의합니다. options 객체는 도넛 차트의 모양과 설정을 정의합니다.

도넛 차트를 그리기 위해 Chartist.Pie 클래스의 인스턴스를 생성하고, .chart-container라는 CSS 클래스를 가진 요소에 도넛 차트를 그립니다.

도넛 차트 설정

다양한 도넛 차트 설정을 사용할 수 있습니다. 위의 예제에서는 donut 속성을 true로 설정하여 도넛 차트로 표현하였고, donutWidth 속성으로 도넛의 너비를 조절하였습니다. donutSolid를 true로 설정하면 도넛 내부가 채워집니다. startAngle은 도넛 차트의 시작 각도를 지정하고, total은 도넛 차트의 전체 크기를 정의합니다.

추가적인 설정 옵션과 기능에 대해서는 Chartist 공식 문서를 참조하세요.

요약

이번 포스트에서는 Chartist를 사용하여 도넛 차트를 그리는 방법에 대해 알아보았습니다. Chartist는 다양한 그래프를 그릴 수 있는 강력한 JavaScript 라이브러리로, 도넛 차트뿐만 아니라 다양한 데이터 시각화에 활용할 수 있습니다.