[javascript] Chart.js에서의 세로 차트 생성 방법

27 Nov 2023

javascript

Chart.js는 JavaScript 기반의 강력한 데이터 시각화 라이브러리입니다. 이 라이브러리를 사용하면 세로 차트를 쉽게 생성할 수 있습니다. 이번 글에서는 Chart.js를 사용하여 세로 차트를 생성하는 방법을 알아보겠습니다.

1. Chart.js 라이브러리 추가

우선, Chart.js 라이브러리를 웹 페이지에 추가해야 합니다. 아래의 코드를 <head> 태그 내에 추가하세요.

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

2. 캔버스 엘리먼트 추가

세로 차트를 표시할 캔버스 엘리먼트를 HTML에 추가해야 합니다. 아래의 코드를 원하는 위치에 추가하세요.

<canvas id="myChart"></canvas>

3. JavaScript 코드 작성

이제 차트를 생성하기 위해 JavaScript 코드를 작성해야 합니다. 다음은 기본적인 세로 차트를 생성하는 코드입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위 코드에서는 myChart라는 변수를 사용하여 세로 차트를 초기화합니다. type 속성을 bar로 설정하여 세로 차트 생성을 지정하고, data 속성을 사용하여 차트에 표시할 데이터와 스타일을 지정합니다. options 속성을 사용하여 차트의 축과 관련된 설정을 변경할 수 있습니다.

4. 적용 확인

위의 코드를 웹 페이지에 추가하고, 웹 페이지를 열어 세로 차트가 정상적으로 표시되는지 확인하세요.

이제 당신도 Chart.js를 사용하여 세로 차트를 생성하는 방법을 알게 되었습니다. Chart.js의 강력한 기능을 활용하여 다양한 시각화 요구사항을 해결해보세요!

참고 자료

Chart.js 공식 문서