[javascript] ApexCharts에서 차트에 파이파이 차트 생성하기

30 Nov 2023

javascript

ApexCharts는 JavaScript 기반의 강력한 차트 라이브러리로, 다양한 종류의 차트를 생성할 수 있습니다. 이번에는 ApexCharts를 사용하여 파이 차트를 생성하는 방법에 대해 알아보겠습니다.

ApexCharts 설치하기

먼저, ApexCharts를 사용하기 위해 해당 라이브러리를 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 ApexCharts를 설치할 수 있습니다.

npm install apexcharts

HTML 파일에 ApexCharts 추가하기

파이 차트를 생성하기 위해 아래와 같이 HTML 파일에 ApexCharts 라이브러리를 추가합니다.

<!DOCTYPE html>
<html>
<head>
    <title>ApexCharts 파이 차트</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/apexcharts@3.28.0/dist/apexcharts.min.css">
    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.28.0/dist/apexcharts.min.js"></script>
</head>
<body>
    <div id="chart"></div>

    <script>
        // 파이 차트를 생성할 데이터 준비하기
        const chartData = {
            series: [44, 55, 13, 43, 22],
            labels: ['A', 'B', 'C', 'D', 'E']
        };

        // 파이 차트 생성 및 설정하기
        const options = {
            chart: {
                type: 'pie'
            },
            series: chartData.series,
            labels: chartData.labels
        };

        // 차트를 특정 div 요소에 렌더링하기
        const chart = new ApexCharts(document.querySelector('#chart'), options);
        chart.render();
    </script>
</body>
</html>

파이 차트 생성하기

위의 HTML 파일에서 #chart 요소를 차트를 렌더링할 위치로 지정하였습니다. chartData 변수에는 파이 차트의 데이터를 설정해주어야 합니다. 여기서는 5개의 시리즈 데이터와 해당 시리즈에 대한 라벨 데이터를 설정하였습니다.

그리고 options 변수에 차트의 설정을 지정하였습니다. type 속성을 pie로 설정하여 파이 차트를 생성합니다.

마지막으로, chart.render() 메소드를 사용하여 차트를 렌더링합니다.

이제 HTML 파일을 실행하면 파이 차트가 나타날 것입니다.

추가적인 설정

ApexCharts는 다양한 설정 옵션과 기능을 제공합니다. 파이 차트에도 다양한 설정을 적용할 수 있습니다. 자세한 내용은 ApexCharts 공식 문서를 참고하십시오.

결론

ApexCharts의 강력한 기능을 활용하여 파이 차트를 생성하는 방법을 알아보았습니다. 이를 바탕으로 다양한 데이터 시각화에 활용할 수 있습니다. ApexCharts를 사용하여 다른 종류의 차트도 생성해보세요!