[javascript] Chart.js에서의 레이더 차트 생성 방법

27 Nov 2023

javascript

Chart.js는 웹 기반 데이터 시각화를 위한 JavaScript 라이브러리입니다. 이를 사용하여 간단하고 멋진 레이더 차트를 생성할 수 있습니다. 레이더 차트는 다양한 카테고리에 대한 데이터를 각각의 축을 기준으로 비교하는 데 사용됩니다.

Chart.js 설치하기

Chart.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. 아래의 명령어를 이용하여 npm 패키지 매니저를 통해 설치할 수 있습니다.

$ npm install chart.js

HTML 파일에 Chart.js 추가하기

레이더 차트를 생성하기 위해 먼저 HTML 파일에 Chart.js를 추가해야 합니다. 아래의 코드를 HTML 파일의 <head> 태그 내에 추가하세요.

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

레이더 차트 생성하기

아래의 예제 코드는 Chart.js를 사용하여 레이더 차트를 생성하는 방법을 보여줍니다. 이 예제는 팀의 개발 진척도를 다섯 가지 기준(디자인, 개발, 테스트, 배포, 문서화)으로 표현하는 레이더 차트입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['디자인', '개발', '테스트', '배포', '문서화'],
        datasets: [{
            label: '팀 개발 진척도',
            data: [90, 80, 70, 60, 85],
            backgroundColor: 'rgba(75, 192, 192, 0.4)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scale: {
            ticks: {
                beginAtZero: true,
                max: 100
            }
        }
    }
});

위의 코드에서 labels 배열은 각각의 축에 해당하는 카테고리를 나타내고, datasets 배열의 data는 해당 카테고리들의 값을 나타냅니다. backgroundColor와 borderColor 속성을 통해 차트의 색상을 지정할 수 있습니다.

레이더 차트 옵션 설정하기

Chart.js를 사용하여 생성한 레이더 차트의 다양한 옵션을 설정할 수 있습니다. 예를 들어, scale 객체를 사용하여 눈금의 시작값과 최대값을 설정할 수 있습니다. 위의 예제 코드에서는 beginAtZero를 true로 설정하여 레이더 차트의 눈금을 0부터 시작하도록 하였습니다.

options: {
    scale: {
        ticks: {
            beginAtZero: true,
            max: 100
        }
    }
}

Chart.js에서 제공하는 다양한 설정 옵션에 대해서는 공식 문서를 참조하시기 바랍니다.

결론

이제 Chart.js를 사용하여 레이더 차트를 생성하는 방법을 알게 되었습니다. 레이더 차트를 사용하면 데이터의 비교 및 분석이 쉬워지므로 다양한 분야에서 유용하게 활용될 수 있습니다. Chart.js의 공식 문서를 참고하여 필요한 옵션들을 적절히 활용하면 더욱 다양하고 풍부한 데이터 시각화를 구현할 수 있습니다.

참고 자료:

Chart.js 공식 문서