[javascript] ApexCharts에서 도넛 그래프 생성하기

30 Nov 2023

javascript

ApexCharts는 JavaScript로 작성된 오픈소스 차트 라이브러리입니다. 이 라이브러리를 사용하면 다양한 유형의 그래프를 생성할 수 있습니다. 이번에는 ApexCharts를 사용하여 도넛 그래프를 생성하는 방법에 대해 소개하겠습니다.

필요한 라이브러리 설치

먼저 ApexCharts를 사용하기 위해 필요한 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 ApexCharts를 설치합니다.

npm install apexcharts

HTML 마크업

도넛 그래프를 표시할 HTML 요소를 작성해야 합니다. 예를 들어, 다음과 같이 <div> 요소를 작성할 수 있습니다.

<div id="donut-chart"></div>

JavaScript 코드 작성

ApexCharts를 사용하여 도넛 그래프를 생성하기 위해 JavaScript 코드를 작성해야 합니다. 아래의 코드는 도넛 그래프를 생성하는 예제입니다.

// 필요한 라이브러리 가져오기
import ApexCharts from 'apexcharts';

// 데이터 세트 정의
const data = {
  series: [44, 55, 13, 43, 22],
  labels: ['Apple', 'Orange', 'Banana', 'Mango', 'Grape']
};

// 차트 옵션 설정
const options = {
  chart: {
    type: 'donut'
  },
  series: data.series,
  labels: data.labels,
  responsive: [{
    breakpoint: 480,
    options: {
      chart: {
        width: 200
      },
      legend: {
        position: 'bottom'
      }
    }
  }]
};

// 도넛 그래프 생성
const chart = new ApexCharts(document.querySelector('#donut-chart'), options);
chart.render();

위의 코드에서는 ApexCharts를 가져오고, 데이터 세트와 차트 옵션을 설정한 후 도넛 그래프를 생성하고 표시합니다.

실행

위의 코드를 실행하기 위해서는 JavaScript 모듈 시스템을 사용해야 합니다. 예를 들어, 위의 코드를 <script> 태그 내부에 작성하거나, 웹팩 등의 번들러를 사용하여 코드를 제작해야 합니다.

이제 웹 브라우저에서 도넛 그래프가 표시되는 것을 확인할 수 있습니다.

참고 자료

위 자료들은 ApexCharts에 대한 공식 문서와 예제를 포함하고 있습니다. 자세한 사용법과 다른 유형의 그래프 생성 방법을 확인하려면 해당 자료를 참고하십시오.