[javascript] Chart.js를 이용한 실시간 차트 업데이트

27 Nov 2023

javascript

이번에는 JavaScript 라이브러리인 Chart.js를 사용하여 실시간 차트 업데이트하는 방법에 대해 알아보겠습니다. 이 방법을 사용하면 데이터가 동적으로 업데이트될 때마다 차트를 실시간으로 갱신할 수 있습니다.

1. Chart.js 설치

먼저 Chart.js를 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 사용하여 설치할 수 있습니다.

npm install chart.js

또는 CDN을 사용하여 다음과 같이 첨부할 수도 있습니다.

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

2. HTML에서 차트 컨테이너 생성

다음으로, HTML에서 차트를 표시할 컨테이너를 생성해야 합니다. 아래와 같이 <canvas> 요소를 추가합니다.

<canvas id="chart"></canvas>

3. JavaScript에서 차트 초기화 및 업데이트

자바스크립트에서는 Chart.js를 사용하여 차트를 초기화하고 업데이트할 수 있습니다. 아래는 간단한 예제입니다.

// 차트 초기화
const ctx = document.getElementById("chart").getContext("2d");
const chart = new Chart(ctx, {
  type: "line",
  data: {
    labels: [],
    datasets: [{
      label: "실시간 데이터",
      data: [],
      borderColor: "blue",
      backgroundColor: "transparent"
    }]
  },
  options: {
    responsive: true,
    scales: {
      x: {
        display: true
      },
      y: {
        display: true,
        suggestedMin: 0,
        suggestedMax: 100
      }
    }
  }
});

// 데이터 업데이트
function updateChart(data) {
  chart.data.labels.push(new Date().toLocaleTimeString());
  chart.data.datasets[0].data.push(data);

  // 데이터 개수 제한 (옵션)
  const maxDataPoints = 10;
  if (chart.data.labels.length > maxDataPoints) {
    chart.data.labels.shift();
    chart.data.datasets[0].data.shift();
  }

  chart.update(); // 차트 업데이트
}

// 테스트 데이터 생성 및 업데이트
setInterval(() => {
  const newData = Math.random() * 100;
  updateChart(newData);
}, 1000);

위의 예제에서는 new Chart()를 이용하여 차트를 초기화하고, updateChart() 함수를 사용하여 데이터를 업데이트합니다. setInterval()을 사용하여 1초마다 새로운 데이터를 생성하여 차트를 업데이트합니다.

결론

이렇게 하면 Chart.js를 사용하여 실시간으로 차트를 업데이트하는 방법을 알 수 있습니다. 사용자의 요구에 따라 다양한 차트 유형과 설정을 사용할 수 있으며, 실시간으로 데이터를 추가하는 방법에 대해서도 알 수 있었습니다.

더 많은 정보를 원하시면 Chart.js의 공식 문서를 참조하시기 바랍니다.

Chart.js 문서