chart.js 사용법 정리

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<script>
$(document).ready(function() {
    // 빈 차트를 생성한다. 
    var chart = new Chart(document.getElementById("myChart"), {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                        {label: [], data: [],},
                        {label: [], data: [],}
            ],
            borderWidth: 1
        },
    });

    <!-- ajax를 이용하여 json 타입의 데이터를 수신 -->
    <!-- 코드 생략 -->

});
</script>

<!-- 차트 그릴 영역 -->
<canvas id="myChart"></canvas>

<button type="button" id="search">조회</button>코

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

$("#search").on('click', function() {
    $.ajax({
        url: URL, 
        type: 'get',
        dataType: 'json',
        success: function (data) {
            
            chart.destroy(); // 기존에 생성한 차트 오브젝트를 없앤다. 
            
            // 수신한 json 타입 데이터를 이용하여 차트를 새로 그린다. 
            chart = new Chart(document.getElementById("myChart"), {
                type: 'line',
                data: {
                    labels: data[0].label,
                    datasets: [
                        {
                            label: "height",
                            data: data[0].height,
                            borderColor: 'rgba(255, 0, 0, 1)',
                        },
                        {
                            label: "weight",
                            data: data[0].weight,
                            borderColor: 'rgba(0, 50, 255, 1)',
                        }
                    ],
                    borderWidth: 1
                },
            });
        },
        error: function (xhr, status, error) {
            // 블라블라
        },
        complete: function (data) {
            // 블라블라
        }
    })
});