[javascript] Chart.js에서의 도넛 차트 생성 방법

27 Nov 2023

javascript

도넛 차트는 데이터를 시각적으로 나타내는 강력한 도구로서 Chart.js를 사용하여 쉽게 생성할 수 있습니다. 이 글에서는 Chart.js를 사용하여 도넛 차트를 생성하는 방법에 대해 알아보겠습니다.

1. Chart.js 설치

먼저, Chart.js를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install chart.js

2. HTML 파일에 스크립트 추가

도넛 차트를 생성하기 위해 HTML 파일에 Chart.js 라이브러리를 추가해야 합니다. 다음 코드를 HTML 파일의 <head> 태그에 추가합니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

3. 도넛 차트 생성하기

도넛 차트를 생성하기 위해 다음 단계를 따르세요.

3.1 데이터 준비

도넛 차트에 표시할 데이터를 준비합니다. 예를 들어, 다음과 같은 데이터를 가지고 있다고 가정해봅시다.

const data = {
  labels: ['Red', 'Blue', 'Yellow'],
  datasets: [{
    data: [10, 20, 30],
    backgroundColor: ['red', 'blue', 'yellow']
  }]
};

3.2 도넛 차트 옵션 설정

도넛 차트의 옵션을 설정합니다. 예를 들어, 다음과 같은 옵션을 설정할 수 있습니다.

const options = {
  responsive: true,
  maintainAspectRatio: false,
  cutoutPercentage: 50
};

3.3 도넛 차트 생성

실제로 도넛 차트를 생성합니다. new Chart 메서드를 사용하여 차트를 생성합니다.

const ctx = document.getElementById('donutChart').getContext('2d');
const donutChart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: options
});

donutChart 객체는 생성된 도넛 차트를 나타냅니다.

4. HTML에서 도넛 차트 표시

다음은 도넛 차트를 표시하기 위해 HTML 파일에 추가해야 하는 코드입니다.

<canvas id="donutChart"></canvas>

위 코드를 원하는 위치에 추가하면 도넛 차트가 표시됩니다.

5. 차트 업데이트

도넛 차트의 데이터나 옵션을 업데이트하려면 update 메서드를 사용합니다.

// 데이터 업데이트
const newData = [40, 50, 60];
donutChart.data.datasets[0].data = newData;

// 옵션 업데이트
const newOptions = {
  responsive: true,
  maintainAspectRatio: false,
  cutoutPercentage: 40
};
donutChart.options = newOptions;

// 차트 업데이트
donutChart.update();

위 코드에서 donutChart는 생성된 도넛 차트 객체입니다.