ChatGPT로 Chart.js 알아보기 (4):원형 차트(Pie Chart)

ChatGPT로 Chart.js 알아보기 (4):원형 차트(Pie Chart)

이번 포스트에서는 Chart.js로 원형 차트(Pie chart)를 생성하는 방법에 대해서 알아보고자 한다.
ChatGPT에게 원형 차트를 생성하는 방법 및 활용법에 대해 내용을 출력해달라 하고 그 내용을 정리했다.
원형 차트 또한 막대 차트처럼 데이터 시각화에서 가장 기본적인 형태이면서 많이 사용되는 차트이다.
원형 차트가 무엇인지부터 알아보자.

원형 차트(Pie chart)란?

원형 차트(Pie Chart)는 전체 데이터셋의 여러 부분을 서로 비교할 때 유용한 그래프 형태이다.
주로 전체 데이터에 대한 각 부분의 상대적인 비율을 나타내고자 할 때 사용된다.
원형 차트는 하나의 원을 여러 조각으로 나누어, 각 조각이 전체 데이터 중 특정 부분을 나타내도록 한다.
원형 차트는 통상적으로 비율이나 백분율을 나타내는데 사용된다.

✔ 사용 예시

• 예산 분배: 회사의 연간 예산을 부서별로 어떻게 분배하는지 시각적으로 보여줄 때 원형 차트를 사용할 수 있다.
• 시장 점유율: 특정 시장에서 여러 회사들이 차지하는 시장 점유율을 나타내기 위해 사용된다. 각 회사가 시장에서 차지하는 비중을 한 눈에 볼 수 있도록 한다.
• 인구 구성: 인구에 대한 데이터를 보여줄 때, 예를 들어 연령대별, 성별 등으로 인구를 구분하여 보여줄 때 원형 차트를 사용한다.
• 제품 판매 현황: 제품 카테고리별 판매 비율을 나타내고자 할 때 사용할 수 있다. 이를 통해 어떤 제품이 더 잘 팔리고 있는지를 빠르게 파악할 수 있다.
• 프로젝트 진행 상황: 프로젝트의 각 단계별로 완료된 작업의 비율을 보여줄 때 사용할 수 있다.

✔ 주의해야 할 점

• 분류 항목의 수: 원형 차트는 분류 항목이 많지 않을 때 효과적이다. 분류 항목이 너무 많으면 각 조각이 너무 작아져서 시각적으로 구분하기 어려워진다.
• 비율의 비교: 원형 차트는 전체 대비 각 부분의 비율을 비교하는데 적합하나, 절대적인 수치 비교에는 적합하지 않다.
• 3D Pie Chart: 3D 원형 차트는 멋지게 보일 수 있지만, 때로는 데이터의 비율을 왜곡시킬 수 있으므로 사용시 주의가 필요하다.

Pie chart 생성

Chart.js로 Pie chart를 생성하려면 Chart 객채의 type에 pie로 선언하면 된다.

type: 'pie'

그 외에 옵션은 막대 차트와 거의 동일하다.
아래는 위에서 예시로 생성한 Pie chart의 코드이다.

<div style="max-width:500px;">
    <canvas id="pieExample"></canvas>
</div>

const pieExample = document.querySelector('#pieExample').getContext('2d');
const pieExampleChart = new Chart(pieExample, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            data: [20, 30, 50],
            backgroundColor: [
                'rgba(255, 0, 0, 0.5)', 
                'rgba(0, 0, 255, 0.5)', 
                'rgba(48, 255, 93, 0.5)'
                ],
            borderColor: [
                'rgba(255, 0, 0, 1)', 
                'rgba(0, 0, 255, 1)', 
                'rgba(48, 255, 93, 1)'
                ],
            borderWidth: 1
        }]
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: 'Pie Chart Example'
            },
            legend: {
                display: true,
                position: 'right'
            }
        }
    }
});

Pie chart를 생성하는 Chart 객체의 매개변수들에 대해서 설명하자면,

1. type: 차트의 종류를 지정한다. 'pie'를 사용하여 원형 차트를 생성.
2. data: 차트의 데이터와 레이블을 설정.

- labels: 각 섹션의 레이블을 설정.
- datasets: 차트의 데이터셋을 설정.

· data: 각 섹션의 값을 설정.
· backgroundColor: 각 섹션의 배경색을 설정.
· borderColor: 각 섹션의 테두리 색상을 설정.
· borderWidth: 각 섹션의 테두리 두께를 설정.

3. options: 차트의 옵션을 설정.

- plugins: 차트의 기능을 확장하거나 사용자 정의할 수 있는 옵션들을 제공

· title: 차트의 제목을 설정.

display: 제목을 표시할지 여부를 설정.
text: 제목 텍스트를 설정.

· legend: 차트의 범례에 대한 설정.

display: 범례를 표시할지 여부를 설정.
position: 범례의 위치를 설정.

개인적으로 생각했을 때 Pie chart를 생성할 때는 많은 옵션을 사용할 일은 별로 없을 것 같긴하다.
엄청 간단하고 단순한 형태라...
아래는 hoverBackgroundColor도 사용해서 slice에 hover 했을 때 컬러가 변경되는 효과를 추가한 Pie chart이다.

<div style="max-width: 500px">
    <canvas id="hoverPieChart"></canvas>
</div>

const hoverPieChartCtx = document.querySelector('#hoverPieChart').getContext('2d');
const hoverPieChart = new Chart(hoverPieChartCtx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            data: [50, 20, 30],
            backgroundColor: [
                'rgba(255, 99, 132, 0.6)', 
                'rgba(54, 162, 235, 0.6)', 
                'rgba(75, 192, 192, 0.6)'],
            borderColor: [
                'rgba(255, 99, 132, 1)', 
                'rgba(54, 162, 235, 1)', 
                'rgba(75, 192, 192, 1)'],
            borderWidth: 1,
            hoverBackgroundColor: [
                'rgba(255, 99, 132, 1)', 
                'rgba(54, 162, 235, 1)', 
                'rgba(75, 192, 192, 1)'],
        }]
    },
    options: {
        plugins: {
            legend: {
                position: 'top',
            },
            title: {
                display: true,
                text: 'Pie Chart Example'
            }
        }
    },
});

위처럼 hoverBackgroundColor를 추가해서 hover 했을 때의 애니메이션 효과를 추가해줄 수 있다.

도넛 차트(Doughnut Chart)

도넛 차트(Doughnut Chart)는 원형 차트의 한 종류로, 중앙이 비어 있는 원 모양으로 데이터를 시각화하는 방법이다.
기본적으로 원형 차트와 유사하지만, 중앙에 빈 공간이 있어 '도넛'처럼 보이는 형태가 특징이다.

도넛 차트는 type을 doughnut으로 설정해줘야 한다.
그 외에는 pie chart와 동일하다.

type: 'doughnut'

그리고 options에 cutout으로 중앙 빈 공간의 비율을 설정할 수 있다.
숫자로만 작성하면 px 단위로 설정하며, %가 붙은 문자열로도 설정이 가능하다.

options: {
    cutout: 120 // == 120px
}

아래는 위 도넛 차트의 코드이다.

<div style="max-width: 500px">
    <canvas id="doughnutChart"></canvas>
</div>

const doughnutChartCtx = document.querySelector('#doughnutChart').getContext('2d');
const doughnutChart = new Chart(doughnutChartCtx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Green'],
        datasets: [{
            data: [20, 30, 50],
            backgroundColor: [
                'rgba(255, 0, 0, 0.5)', 
                'rgba(0, 0, 255, 0.5)', 
                'rgba(48, 255, 93, 0.5)'
                ],
            borderColor: [
                'rgba(255, 0, 0, 1)', 
                'rgba(0, 0, 255, 1)', 
                'rgba(48, 255, 93, 1)'
                ],
            borderWidth: 1
        }]
    },
    options: {
        cutout: '50%',
    }
});

이번 포스트에서는 Chart.js로 원형 차트, 도넛 차트를 생성하는 방법에 대해서 간단하게 알아보았다.
type과 options가 어떻게 들어가는지 정도만 알면 쉽게 만들 수 있는 것 같다.
근데 이번에 ChatGPT로 알아보면서 Chart.js가 업데이트된 부분에 대해서는 제대로 캐치하지 못한 부분이 몇 개 있었다.
(cutoutPercentage라는 옵션이 cutout으로 이름이 변경되었다든지...)
그럴 땐 공식 문서를 찾아봤는데, 역시 ChatGPT로 공부할 때는 100% ChatGPT에게 의지하는 것보다 공식 문서도 함께 보는 것이 좋은 것 같다.

커피 한 잔으로
저를 응원해주세요!