Chart.js는 웹 기반의 데이터 시각화 라이브러리로, 다양한 차트와 그래프를 만들기 위한 강력한 기능을 제공합니다. 이 라이브러리를 사용하여 동적 데이터를 효과적으로 표현하는 방법을 알아보겠습니다.

데이터 준비하기

우선, 차트에 표시할 데이터를 준비해야 합니다. 일반적으로 동적 데이터는 서버로부터 받아와야 하지만, 여기서는 간단한 예제를 위해 클라이언트 측에서 생성하는 방법을 사용하겠습니다.

// 데이터 생성
const data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
    label: 'Example Dataset',
    data: [12, 19, 3, 5, 2, 3],
    backgroundColor: ['red', 'blue', 'yellow', 'green', 'purple', 'orange'],
  }]
};

위의 코드에서 labels 배열은 차트의 각 항목의 라벨을 나타내고, data 배열은 해당 항목의 값들을 나타냅니다. datasets 배열은 차트의 데이터셋을 정의하며, label 속성은 데이터셋의 이름을 나타내고, data 속성은 해당 데이터셋의 값 배열을 나타냅니다.

차트 생성하기

이제 데이터를 준비했으니 Chart.js를 사용하여 동적 차트를 생성해보겠습니다.

// 차트 생성
const ctx = document.getElementById('myChart').getContext('2d');
const chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    responsive: true,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

위의 코드에서 getElementById를 사용하여 차트를 표시할 canvas 요소를 가져옵니다. getContext('2d')에서 2D 렌더링 컨텍스트를 가져온 후, new Chart로 차트 객체를 생성합니다.

type 속성은 생성할 차트의 타입을 지정하며, data 속성에는 위에서 생성한 데이터를 할당합니다. options 속성을 통해 차트의 설정을 지정할 수 있습니다. 위의 예제에서는 responsive 속성을 true로 설정하여 차트의 크기가 자동으로 조정되도록 하고, scales 속성을 사용하여 y축의 값을 0부터 시작하도록 설정했습니다.

데이터 업데이트하기

동적 데이터를 표현하기 위해서는 데이터를 업데이트할 수 있는 기능이 필요합니다. Chart.js에서는 chart.data 객체를 통해 데이터를 업데이트할 수 있습니다.

// 데이터 업데이트
function updateData() {
  const newData = [25, 10, 5, 15, 20, 12];

  chart.data.datasets[0].data = newData;
  chart.update();
}

위의 예제에서는 updateData 함수를 통해 새로운 데이터를 생성한 후, chart.data.datasets[0].data에 새로운 데이터를 할당하여 데이터를 업데이트합니다. 마지막으로 update 메서드를 호출하여 차트를 다시 그려줍니다.

마무리

Chart.js를 사용하면 동적 데이터를 효과적으로 표현할 수 있습니다. 데이터를 준비하고 차트를 생성한 후, 데이터를 업데이트하여 웹 페이지에서 동적으로 변화하는 차트를 구현할 수 있습니다.

더 많은 차트와 그래프 옵션에 대해서는 Chart.js 공식 문서를 참고하시기 바랍니다.