사용법

Chart.js는 일반 자바스크립트와 모듈 로더, ES6 모듈과 함께 사용할 수 있습니다.

차트 생성하기

차트를 만들기 위해, Chart 클래스를 인스턴트화해야 합니다. 이를 위해서, 차트를 그리려는 캔버스의 노드, 제이쿼리 인스턴스, 또는 2d 컨텍스트를 넘겨줍니다. 여기 예제입니다.

<canvas id="myChart" width="400" height="400"></canvas>

// 다음 형식 중 하나를 사용할 수 있습니다
var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';

요소 또는 컨텍스트를 가지고 있다면, 미리 정의된 차트 유형을 인스턴트화하거나 직접 작성할 준비가 되었습니다!

다음 예제는 다른 색상의 투표 수와 0부터 시작하는 y 축을 보여주는 막대형 차트를 인스턴트화합니다.

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart');
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(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: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>