준비하기

먼저, Chart.js 라이브러리를 다운로드하고 HTML 문서에 포함해야 합니다. 다음 코드를 사용하여 Chart.js 파일을 다운로드 받을 수 있습니다.

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

데이터 설정

카테고리 데이터를 시각화하기 위해서는 해당 카테고리와 연결된 값을 가지고 있는 데이터를 사용해야 합니다. 예를 들어, 다음과 같은 데이터가 있다고 가정해봅시다.

var data = {
  labels: ['사과', '바나나', '오렌지', '포도', '파인애플'],
  values: [12, 8, 5, 9, 15]
};

위의 데이터는 ‘사과’, ‘바나나’, ‘오렌지’, ‘포도’, ‘파인애플’라는 카테고리와 해당하는 값들을 가지고 있습니다.

차트 생성

데이터를 설정한 후에는 실제로 차트를 생성해야 합니다. Chart.js에서는 다양한 차트 유형을 지원하며, 카테고리 데이터를 시각화하기 위해 막대 그래프(bar chart)를 사용할 수 있습니다.

다음과 같이 코드를 작성하여 막대 그래프를 생성할 수 있습니다.

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: data.labels,
        datasets: [{
            label: '판매량',
            data: data.values,
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위의 코드에서 getElementById('myChart')는 차트를 표시할 HTML 요소의 ID를 가져옵니다. 이 요소는 <canvas> 태그로 생성되어야 합니다.

결과 확인

위의 코드를 작성한 후, 브라우저에서 HTML 파일을 열어서 결과를 확인할 수 있습니다. 막대 그래프가 생성되고 카테고리와 해당하는 값이 잘 표시되는지 확인해보세요.

정리

이 포스트에서는 Chart.js를 사용하여 카테고리 데이터를 시각화하는 방법을 알아보았습니다. Chart.js를 사용하면 간단하고 직관적인 방법으로 다양한 차트를 만들 수 있으므로, 데이터 시각화에 활용해보세요.

참고 자료

• Chart.js 문서
• Chart.js 예제