[javascript] Chart.js 설치 및 설정 방법

27 Nov 2023

javascript

Chart.js는 강력한 데이터 시각화 도구입니다. 이 블로그 포스트에서는 Chart.js를 설치하고 설정하는 방법에 대해 알아보겠습니다.

1. Chart.js 다운로드

Chart.js를 사용하기 위해서는 먼저 해당 라이브러리를 다운로드해야 합니다. Chart.js는 공식 웹 사이트에서 제공하고 있으며, 다음 링크를 통해 다운로드할 수 있습니다.

Chart.js 다운로드 링크

2. 프로젝트에 Chart.js 추가하기

Chart.js를 다운로드한 후에는 프로젝트에 해당 라이브러리를 추가해야 합니다. 여러 가지 방법으로 추가할 수 있지만, 가장 간단한 방법은 script 태그를 사용하여 참조하는 것입니다.

<script src="path/to/chart.min.js"></script>

위 코드에서 path/to/chart.min.js는 Chart.js 파일이 위치한 경로로 변경해야 합니다.

3. Chart.js 초기화 및 설정하기

Chart.js를 추가한 후에는 차트를 초기화하고 원하는 설정을 적용해야 합니다. 아래는 Chart.js를 초기화하고 기본 설정을 적용하는 예제입니다.

var ctx = document.getElementById('myChart').getContext('2d');
var chart = 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(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위 코드에서 myChart는 차트가 그려질 canvas 요소의 ID입니다. 여기서는 canvas 요소의 ID가 myChart인 것으로 가정하고 코드를 작성했습니다.

마무리

이제 Chart.js를 설치하고 설정하는 방법을 알아보았습니다. Chart.js는 다양한 차트 유형과 설정 옵션을 제공하므로, 필요에 따라 자세한 문서를 참조하여 원하는 차트를 구현할 수 있습니다.

더 많은 정보를 원하시면 공식 문서를 참조하세요.