2023.05.11

당시에 마무리 짓지 못한 일지를 완성

지난번에 chart.js에 대해 배운다고 했는데 예제를 보면서 정리하는 시간을 가지려고한다.

<canvas id="myChart" style="max-width: 800px; max-height: 600px;"></canvas>
const ctx = document.getElementById('myChart').getContext('2d');
...
function getProductCount() {
    fetch('api_address')
        .then(response => response.json())
        .then(json => {
            if (myChart) {
                myChart.destroy();  // 이전 차트를 지웁니다.
            }
            myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: json.dates,
                    datasets: [{
                        label: 'Product Count',
                        data: json.counts,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
                        borderColor: 'rgba(75, 192, 192, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
}

api에 fetch를 하여 JSON을 받아오면, new Chart를 통해 차트를 생성한다. 이 차트는 ctx 변수를 통해 canvas위에 띄워진다. 다시 돌아가서 data 오브젝트를 생성하여 내용을 채워주면 된다. type은 'bar'로 되어있는데 아래 가능한 차트 유형을 보고 선택하여 작성하면 된다. 그 외에는 datasets 를 통해 차트를 채울 내용들을 넣어주면된다. 보통 key 값을 labels에 value 값들을  data에 넣어주면 끝이다.

1. 'line': 선 그래프.
2. 'bar': 막대 그래프.
3. 'radar': 레이더 그래프.
4. 'doughnut'와 'pie': 도넛형 및 원형 그래프.
5. 'polarArea': 극영역 그래프.
6. 'bubble': 버블 차트.
7. 'scatter': 산점도 그래프.