ChatGPT로 Chart.js 알아보기 (8):극 면적 차트(Polar Area Chart)

ChatGPT로 Chart.js 알아보기 (8):극 면적 차트(Polar Area Chart)

이번 포스트에서는 ChatGPT로 Chart.js의 극 면적 차트(Polar Area Chart)를 생성하는 방법에 대해 알아보았다.
극좌표 차트라고도 하는 거 같은데 정확한 명칭을 구글링 해보았으나 뭔가 명확한 설명이 있는 자료를 찾질 못했다.
우선 ChatGPT가 설명해 주는 내용 기준으로 이 차트에 대해서 알아보고 내용을 정리해 보았다.

극 면적 차트 (Polar Area Chart)

Polar Area Chart는 극 좌표계를 기반으로 하는 차트이다.

여기서 '극'이라는 단어는 '극 좌표계'를 나타내는 것으로, 평면 위의 각 점을 거리와 각도를 사용하여 나타내는 좌표 시스템이다.
이 차트의 핵심은 데이터 포인트를 원형으로 배열하고, 각 데이터 포인트의 값에 따라 섹션의 면적을 조정하는 것이다.

• 각도: Polar Area Chart에서 각도는 카테고리 혹은 데이터 그룹을 구분하는데 사용된다. 즉, 각 섹션은 서로 다른 카테고리를 나타낸다.
• 반지름: 반지름은 각 카테고리의 값을 나타내며, 값이 클수록 반지름이 길어진다.
• 면적: 각도와 반지름에 따라 형성되는 원형의 섹션은 특정 카테고리의 '값'을 시각적으로 표현한다.

이 차트는 다양한 데이터 유형에 적용될 수 있지만, 특히 시간에 따른 패턴이나 주기성을 갖는 데이터에 대해 탁월한 성능을 발휘한다.
예를 들어, 24시간 동안의 날씨 변화, 한 해 동안의 온도 변화 등을 효과적으로 시각화할 수 있다.

하지만 각 섹션의 면적을 비교하는 것이 직관적이지 않을 수 있으므로, 이 차트를 사용할 때는 섹션의 면적이 데이터 값의 크기를 직접적으로 나타내는 것임을 명심해야 한다.
또한, 데이터의 복잡성이 증가하면 이해하기 어려워질 수 있으므로, Polar Area Chart는 상대적으로 간단한 데이터셋에 가장 잘 작동한다.

Chart.js로 Polar Area Chart 생성

Polar Area Chart를 생성하려면 type을 polarArea로 설정하면 된다.

type: 'polarArea'

위 예제의 차트를 생성하려면 아래처럼 작성하면 된다.

<div style="max-width: 600px;">
    <canvas id="polarExample"></canvas>
</div>

const polarCtx = document.querySelector('#polarExample').getContext('2d');
const polarChartExample = new Chart(polarCtx, {
    type: 'polarArea',
    data: {
        labels: ['SNS', '이메일', '게임', '음악', '웹 브라우징', '기타'],
        datasets: [{
            data: [2, 1, 3, 2, 2, 1],
            backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo']
        }]
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: '하루 동안의 스마트폰 앱 사용 시간'
            }
        }
    }
});

전체적인 기본 사용 방법은 Bar, Line Chart와 동일하다.

예시

Polar Area Chart의 예시를 확인해보면서 몇가지 options에 대해서 알아보자.

✔ 하루 동안의 웹사이트 방문 트래픽
만약 하루 동안의 웹사이트 방문 트래픽을 주제로 Polar Area Chart를 구성한다면, 데이터는 아래와 같을 것이다.

• 00시 ~ 06시: 1,000 방문자
• 06시 ~ 12시: 2,500 방문자
• 12시 ~ 18시: 3,500 방문자
• 18시 ~ 24시: 2,000 방문자

이 예제에서는 각 데이터의 면적 부분에 마우스로 hover 했을 때의 스타일을 변경해보겠다.

위 예제에서는 마우스를 hover 했을 때 면적의 테두리가 점선 스타일로 나오는 것을 확인 할 수 있다.
hover 옵션들을 사용하면 간단하게 설정할 수 있다.

hoverBackgroundColor: [...],
hoverBorderColor: [...],
hoverBorderDash: [...],
hoverBorderDashOffset: 2.0,
hoverBorderWidth: 4,
hoverBorderJoinStyle: 'round'

옵션	설명
hoverBackgroundColor	마우스 호버 상태일 때 데이터 영역의 배경색
hoverBorderColor	마우스 호버 상태일 때 데이터 영역의 테두리 색
hoverBorderDash	마우스 호버 상태일 때 데이터 영역의 테두리 길이와 호버링 시 대시 간격
hoverBorderDashOffset	마우스 호버 상태일 때 데이터 영역의 점선 테두리의 시작 오프셋
hoverBorderWidth	마우스 호버 상태일 때 데이터 영역의 테두리 두께
hoverBorderJoinStyle	마우스 호버 상태일 때 데이터 영역의 점선 테두리의 연결 스타일 : round, bevel, miter

const websiteCtx = document.querySelector('#websiteChart').getContext('2d');
const websiteChart = new Chart(websiteCtx, {
    type: 'polarArea',
    data: {
        labels: ['00시 ~ 06시', '06시 ~ 12시', '12시 ~ 18시', '18시 ~ 24시'],
        datasets: [{
            data: [1000, 2500, 3500, 2000],
            backgroundColor: [
                'rgba(255, 105, 180, 0.5)', 
                'rgba(135, 206, 250, 0.5)', 
                'rgba(152, 251, 152, 0.5)', 
                'rgba(240, 230, 140, 0.5)'
                ],
            hoverBackgroundColor: [
                'rgba(255, 105, 180, 0.7)', 
                'rgba(135, 206, 250, 0.7)', 
                'rgba(152, 251, 152, 0.7)', 
                'rgba(240, 230, 140, 0.7)'
                ],
            hoverBorderColor: [
                'rgba(255, 105, 180, 1)', 
                'rgba(135, 206, 250, 1)', 
                'rgba(152, 251, 152, 1)', 
                'rgba(240, 230, 140, 1)'
                ],
            hoverBorderDash: [8, 5],
            hoverBorderDashOffset: 2.0,
            hoverBorderWidth: 4,
            hoverBorderJoinStyle: 'round'
        }]
    },
    options: {
        plugins: {
            title: {
                display: true,
                text: '하루 동안의 웹사이트 방문 트래픽'
            }
        }
    }
});

✔ 스마트폰 앱 사용 시간 트래픽
만약 스마트폰 앱 사용 시간을 주제로 Polar Area Chart를 구성한다면 Chart.js로 아래처럼 만들어볼 수 있다.
이 예시에서는 circular 옵션을 변경해서 원이 아닌 직선형태의 Polar Area Chart로 변경해보겠다.
그리고 startAngle 옵션을 사용해서 Chart의 각도도 한번 변경해보았다.

circular 옵션을 사용하면 이렇게 원 형태가 아닌 직선 형태의 차트로 변경할 수 있다.
options에 circular를 false로 하면 표시되는 면적의 모양이 직선형태로 변경된다.
그리고 scales.r.grid에 circular를 false로 변경하면 차트의 스케일 라인의 모양도 직선 형태로 변경된다.

startAngle 옵션을 사용하면 차트의 시작하는 각도를 정의할 수 있다. (기본값은 0)

options: {
    circular: false,
    scales: {
        r: {
            startAngle: -30,
            grid: {
                circular: false,
            }
        }
    },
}

const smartAppCtx = document.querySelector('#smartAppChart').getContext('2d');
const smartAppChart = new Chart(smartAppCtx, {
    type: 'polarArea',
    data: {
        labels: ['인스타그램', '유튜브', '카카오톡', '네이버', '구글맵'],
        datasets: [{
            data: [30, 50, 20, 40, 10],
            backgroundColor: [
                'rgba(250, 190, 212)', 
                'rgba(219, 226, 255)', 
                'rgba(208, 255, 219)', 
                'rgba(255, 250, 218)', 
                'rgba(251, 237, 255)'
            ]
        }]
    },
    options: {
        circular: false,
        scales: {
            r: {
                grid: {
                    circular: false,
                }
            }
        },
        plugins: {
            title: {
                display: true,
                text: '스마트폰 앱 사용 시간'
            }
        }
    }
});

이번 포스트에서는 Polar Area Chart에 대해 알아보았다.
사실 처음 사용해 보는 차트 유형이라 이름을 찾는 것에서부터 좀 해맸다...
그리고 ChatGPT가 출력해 주는 코드에서 몇 가지는 작동이 잘 안되는 게 있어서 이건 공식 문서를 보면서 따로 알아보았는데 시간을 좀 많이 사용했다.
아무튼 개인적으론 포스트 작성하면서 새로운 차트 유형에 대해 배울 수 있었던 유익한 시간이었다.

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