chart.js를 살짝 익혀봅시다

이러한 멋진 차트를 달리는..(?) 아니 만드는 유저가 되고 싶었다!

chart.js는 생각보다 어렵지 않습니다. 생각보다 단조롭고, 싱글 데이터값부터 멀티 데이터값까지 다양하게 넣을 수 있는 장점이 있습니다.

 

그동안 chart.js에 대해 많이 쫄아(?)있었지만, 생각보다 어렵지 않게 이용이 가능했습니다. 아직까지는 데이터를 불러와서 적용하는 부분보다는 random이나 고정값으로 밖에 테스트를 하지 못했습니다. 그래도 그려지는 부분, 원리를 아는 것이 가장 중요한 것이니까!!

 

1. chart.js 연결

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

CDN이나 파일로 연결을 하면 사용할 준비가 된 셈입니다. 저는 테스트를 목적으로 하는 부분이기에 CDN으로 연결을 하였으나, 실제로 chart.js를 서비스에 포함시킨다면 파일로 연결을 해야 이롭습니다.

 

2. 영역 만들기

<div style="width:600px;height:400px;">
    <canvas id="myChart"></canvas>
</div>

영역을 잡지 않고 다이렉트로 mychart(default)를 넣게 되면 엄청나게 큰 차트를 눈 앞에 맞닥들이게 됩니다. 그렇기 때문에 부모요소를 통해서 하나 감싼 후에 myChart를 넣어주고, 크기를 잡는 것이 커스터마이징하는 부분에서 좋습니다.

 

일단, 예제에서는 600x400의 블록 요소 div로 진행할 것 입니다.

3. 스크립트 기재

var ctx = document.getElementById('myChart').getContext('2d');  // 1

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // 2
        datasets: [{
            label: '# of Votes', // 3
            data: [12, 19, 3, 5, 2, 3], // 4
            backgroundColor: [  // 5
                '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
            }
        }
    }
});

1. 2번 항목에서 ID가 myChart 인 영역에 chart.js가 그려지게 됩니다.
2. x의 값 데이터를 배열 형태로 기재
3. 라벨에 대한 이름
4. 데이터는 배열 형태로 기재하면 됩니다.
5. backgound-color, border-color 표현이 가능합니다.

4. 응용하기

 

var context = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(context, {
    type: 'bar',
    data: {
        labels: ['주식','오마이걸','슈퍼주니어','비과세저축'],
        datasets: [{
            label: '사람들의 관심사',
            data: [
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
            ],
            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,
        }, {
            label: '이것은 못참지!',
            data: [
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
                Math.random()*90000,
            ],
            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
            }
        }
    }
});

싱글 데이터 값인 차트가 있는 반면에 값이 2개 이상인 멀티 데이터 차트도 존재합니다. 충분히 구현이 가능하고, 여기에서는 주의할 점은 바로 datasets 안에 label, data를 배열 형태로 넣으면 적용됩니다. 비교를 하거나 복합적인 부분에서는 많이 사용하는 형태이기 때문에 잘 익혀가는 것도 중요합니다.

 

그리고 여기에서는 데이터값이 고정값이 아닌, Math.random()을 통해서 랜덤값으로 코드를 작성 하였습니다.

Math.random()*90000;

*90000은 최대값입니다. 0~90000 사이의 숫자가 랜덤으로 됩니다. 다른 데이터로 테스트를 하거나 숫자를 조정하고 싶으시다면 *90000이 아닌, 다른 숫자도 넣어보시는 것을 추천드립니다.

---

다음에는 동적으로 데이터를 들어갈 때 어떻게 표현이 되어야하는지 구현을 해보고 싶다.