[javascript] ApexCharts에서 파이 그래프 생성하기

30 Nov 2023

javascript

ApexCharts는 JavaScript 기반의 강력한 차트 라이브러리입니다. 이러한 라이브러리를 사용하여 파이 그래프를 생성하는 방법을 알아보겠습니다.

1. ApexCharts 설치하기

먼저, ApexCharts를 사용하기 위해 해당 라이브러리를 설치해야 합니다. 아래 명령어를 사용하여 NPM(Node Package Manager)을 통해 ApexCharts를 설치합니다.

npm install apexcharts

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

다음으로, ApexCharts 스크립트를 HTML 파일에 추가해야 합니다. 아래와 같이 <script> 태그를 사용하여 ApexCharts 스크립트를 불러옵니다.

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

3. 파이 그래프 생성하기

이제 파이 그래프를 생성하는 예제 코드를 작성해보겠습니다. 아래 코드는 데이터와 그래프 설정을 정의한 후, ApexCharts를 이용하여 파이 그래프를 그립니다.

const options = {
  series: [44, 55, 13, 43, 22],
  labels: ['사과', '바나나', '딸기', '포도', '수박'],
  chart: {
    width: 380,
    type: 'pie',
  },
};

const chart = new ApexCharts(document.querySelector("#chartContainer"), options);
chart.render();

위 코드에서 series는 각 분류에 대한 값의 배열을 나타냅니다. labels는 분류의 이름을 나타내는 배열입니다. chart 객체는 그래프의 크기와 형태를 설정합니다.

4. 결과 확인하기

위 코드를 실행하고, 파이 그래프가 정상적으로 표시되는지 확인해보세요. 파이 그래프가 차트 컨테이너(<div id="chartContainer"></div>) 안에 그려집니다.

ApexCharts를 사용하여 파이 그래프를 생성하는 방법에 대해서 알아보았습니다. 이를 기반으로 데이터를 직관적이고 시각적으로 표현할 수 있습니다.

참고 자료

ApexCharts 공식 문서: https://apexcharts.com
NPM 패키지: https://www.npmjs.com/package/apexcharts