Chart.js는 JavaScript로 작성된 오픈 소스 차트 라이브러리로서 다양한 종류의 차트를 생성할 수 있습니다. 이번 포스트에서는 Chart.js를 사용하여 막대 차트를 생성하는 방법에 대해 알아보겠습니다.

1. Chart.js 설치

먼저 Chart.js를 사용하기 위해 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 Chart.js를 설치하세요.

npm install chart.js

2. HTML에 캔버스 엘리먼트 추가

Chart.js는 캔버스 엘리먼트를 사용하여 차트를 표시합니다. 따라서, HTML 파일에 캔버스 엘리먼트를 추가해야 합니다. 아래와 같이 <canvas> 태그를 추가하세요.

<canvas id="barChart"></canvas>

3. JavaScript로 막대 차트 생성

위에서 추가한 캔버스 엘리먼트를 사용하여 JavaScript 코드로 막대 차트를 생성할 수 있습니다. 아래 예제 코드를 참고하세요.

const ctx = document.getElementById('barChart').getContext('2d');

new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March' 'April', 'May', 'June'],
        datasets: [{
            label: 'Sales',
            data: [120, 190, 160, 180, 150, 200],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        },
        responsive: true
    }
});

위 코드에서 #barChart는 앞서 추가한 캔버스 엘리먼트의 id입니다. labels 배열에는 x축에 표시할 레이블을, data 배열에는 막대 차트의 각 막대에 대한 데이터를 입력합니다.

backgroundColor, borderColor, borderWidth 등을 사용하여 막대의 색상과 테두리 스타일을 설정할 수 있습니다.

scales 옵션을 사용하여 y축이 0 부터 시작하도록 설정할 수 있으며, responsive 옵션을 true로 설정하여 차트가 반응형으로 동작하도록 설정할 수 있습니다.

마무리

이제 Chart.js를 사용하여 막대 차트를 생성하는 방법을 알아보았습니다. Chart.js는 다양한 설정 옵션과 호환 가능한 차트 종류를 지원하므로, 필요에 따라 자세한 문서를 참고하여 사용해보세요.

• Chart.js 공식 홈페이지: https://www.chartjs.org/
• Chart.js 문서: https://www.chartjs.org/docs/latest/