ChatGPT로 Chart.js 알아보기 (6):레이더 차트(Radar Chart)

ChatGPT로 Chart.js 알아보기 (5):레이더 차트(Radar Chart)

이번 포스트에서는 ChatGPT로 Chart.js의 레이더 차트(Rader Chart)를 생성하는 방법에 대해 알아보았다.
ChatGPT가 설명해 준 내용을 바탕으로 정리해 보았는데, 레이더 차트가 무엇인지부터 한번 알아보자.

레이더 차트(Radar Chart)란?

레이더 차트(Radar Chart), 또는 스파이더 차트(Spider Chart)는 여러 변수의 상대적인 크기를 한눈에 비교하기 쉽게 표현하는데 사용되는 그래프 형태이다.
이 차트는 원형으로 되어 있으며, 중심에서 바깥쪽으로 향하는 축이 여러 개 있다.
각 축은 서로 다른 변수를 나타내며, 중심에서부터 바깥쪽으로 갈수록 값이 커진다.

데이터 포인트들은 이 각 축 상에 표시되고, 각 데이터 포인트들을 선으로 이어서 면으로 채워질 수도 있다.
이렇게 되면, 레이더 차트 내부에는 데이터의 패턴을 한눈에 파악할 수 있는 영역이 형성된다.

레이더 차트는 스포츠 선수의 여러 능력치를 비교하는데 사용할 수 있다.
축이 각각의 능력치(예: 속도, 힘, 기술 등)를 나타내고, 그 능력치에 따라 데이터 포인트를 표시한다.

제품이나 서비스의 여러 특징을 평가하고 비교하는데도 사용될 수 있다.
여러 제품의 특징들을 축으로 설정하고, 각 제품의 특징 값을 데이터 포인트로 표시하여 쉽게 비교할 수 있다.

레이더 차트는 여러 변수를 동시에 비교할 수 있어서 유용하지만,
변수가 너무 많거나 값의 차이가 큰 경우에는 읽기 어려울 수 있으므로 적절한 상황에서 사용하는 것이 중요하다.

Radar Chart 생성

레이더 차트는 Chart 객체의 type을 radar로 설정하면 된다.

type: 'radar'

위에서 출력한 레이더 차트를 생성하려면 아래처럼 코드를 작성하면 된다.

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

const RadarChartExampleCtx = document.querySelector('#radarChartExample').getContext('2d');
const radarChartExample = new Chart(RadarChartExampleCtx, {
    type: 'radar',
    data: {
        labels: ['힘', '지능', '민첩', '체력', '매력'],
        datasets: [{
            label: '캐릭터 능력치',
            data: [80, 90, 70, 60, 95],
            backgroundColor: 'rgba(16, 163, 127, 0.2)',
            borderColor: 'rgba(16, 163, 127, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            ticks: {
                beginAtZero: true,
                max: 100
            }
        }
    }
});

변수	설명
data	차트에 표시할 데이터를 설정하는 객체.
labels	레이더 차트의 각 축에 표시될 라벨을 설정.
datasets	차트에 표시될 데이터셋을 설정하는 배열.
label	데이터 셋의 레이블을 설정. 범례에 표시된다.
backgroundColor	차트 영역의 배경색을 설정.
borderColor	차트 영역의 테두리 색상을 설정.
borderWidth	차트 영역의 테두리 두께를 설정.
options	차트의 여러 옵션을 설정하는 객체. 여기에는 눈금, 제목, 범례 등에 대한 설정이 포함될 수 있다.
scale	레이더 차트의 스케일을 설정하는 객체. 이 속성 안에서 눈금(ticks) 설정을 할 수 있다.
ticks	스케일에 표시될 눈금에 대한 설정을 하는 객체. 여기에는 시작 값, 최대 값 등이 설정될 수 있다.

예시

레이더 차트의 활용 예시를 몇가지 알아보면서, Chart 객체의 options 활용 방법도 몇가지 함께 알아보겠다.

✔ 학생의 과목별 성적 비교
두 학생의 과목별 성적을 레이더 차트로 비교하는 차트를 생성해보겠다.
이 예시에서는 options에 tension을 설정해서 레이터 차트에 둥근 모서리를 적용해보겠다.

options 안에 elements.line.tension을 설정하면 레이더 차트의 선에 둥근 모서리를 추가할 수 있다.
elements.line.tension은 차트의 선들이 얼마나 곡선으로 표현될지를 결정하는 매개변수이다.
이 값은 0부터 1사이 숫자를 가질 수 있으며, 0에 가까울 수록 직선으로, 1에 가까워질수록 곡선으로 표시된다.

options: {
    elements: {
        line: {
            capBezierPoints: true,
            tension: 0.4
        }
    }
}

const studentCtx = document.querySelector('#studentRadar').getContext('2d');
const studentRadar = new Chart(studentCtx, {
    type: 'radar',
    data: {
        labels: ['수학', '과학', '국어', '영어', '사회'],
        datasets: [{
            label: '학생 A',
            data: [90, 85, 95, 80, 88],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        },
        {
            label: '학생 B',
            data: [80, 90, 85, 95, 90],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
        }]
    },
    options: {
        elements: {
            line: {
                capBezierPoints: true,
                tension: 0.4
            }
        }
    }
});

✔ 제품 평가 비교
이 예시는 두 제품의 여러 가지 요소(성능, 디자인, 가격, 내구성, 사용성)를 평가하여 비교하는 레이더 차트이다.
이 예시에서는 레이더 차트 축 눈금 변경하는 옵션을 추가해보겠다.
그리고 레이더 차트의 그리드 라인 색상도 함께 변경해보겠다.

레이더 차트의 축 눈금을 변경하려면, options 안에 scales.r.ticks 설정을 사용하면 된다.
이 예시에서는 축의 간격(stepSize)을 20으로, 축에 표시되는 최대값(maxTicksLimit)을 100으로 설정했다.
그리고 축이 0부터 시작할 수 있게 beginAtZero를 true로 설정했다.
그리드 라인의 색상을 변경하려면 options 안에 scales.r.grid.color 설정을 사용하면 된다.

options: {
    scales: {
        r: {
            ticks: {
                stepSize: 20,
                maxTicksLimit: 100
            },
            beginAtZero: true,
            grid: {
                color: 'rgba(0, 128, 0, 0.3)'
            }
        }
    }
}

✔ 스포츠 선수 능력치 비교
이 예시는 두 스포츠 선수의 능력치를 레이더 차트로 비교한다.
선수들의 속도, 드리블, 슛, 패스, 체력, 수비 능력을 시각적으로 한눈에 파악할 수 있다.
이 예시에서는 레이더 차트에 포인트 스타일을 변경해보겠다.

위 예시에서는 선수 A의 포인트 스타일을 별로, 선수 B의 포인트 스타일을 십자 모양으로 변경해보았다.
포인트 스타일은 데이터셋에 각 데이터에 pointStyle을 설정하면 된다.

datasets: [{
    // 선수 A 데이터...
    pointBackgroundColor: 'rgba(153, 102, 255, 1)',
    pointRadius: 7,
    pointStyle: 'star'
},
{
    // 선수 B 데이터...
    pointBackgroundColor: 'rgba(255, 206, 86, 1)',
    pointRadius: 7,
    pointStyle: 'cross'
}]

const sportCtx = document.querySelector('#sportChart').getContext('2d');
const sportChart = new Chart(sportCtx, {
    type: 'radar',
    data: {
        labels: ['속도', '드리블', '슛', '패스', '체력', '수비'],
        datasets: [{
            label: '선수 A',
            data: [90, 85, 80, 88, 90, 85],
            backgroundColor: 'rgba(153, 102, 255, 0.2)',
            borderColor: 'rgba(153, 102, 255, 1)',
            borderWidth: 1,
            pointBackgroundColor: 'rgba(153, 102, 255, 1)',
            pointRadius: 7,
            pointStyle: 'star'
        },
        {
            label: '선수 B',
            data: [85, 90, 85, 90, 85, 90],
            backgroundColor: 'rgba(255, 206, 86, 0.2)',
            borderColor: 'rgba(255, 206, 86, 1)',
            borderWidth: 1,
            pointBackgroundColor: 'rgba(255, 206, 86, 1)',
            pointRadius: 7,
            pointStyle: 'cross'
        }]
    },
});

pointStyle에 대한 설명은 이전에 작성한 꺾은선 그래프(Line Chart)에 설명이 있으니 참고하면 될 것 같다.

2023.06.20 - [With chatGPT/Javascript] - ChatGPT로 Chart.js 알아보기 (5):선 그래프 (Line Chart)

ChatGPT로 Chart.js 알아보기 (5):선 그래프 (Line Chart)

이번에는 Chart.js로 레이더 차트를 생성하는 방법에 대해서 알아보았다.
개인적으로 레이더 차트는 데이터 시각화 자료들 중에서 좀 멋진 시각화 자료가 아닌가 싶다.

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