[javascript] Chart.js에서의 스트림 차트 생성 방법

27 Nov 2023

javascript

Chart.js는 데이터 시각화를 위한 JavaScript 라이브러리입니다. 스트림 차트는 시간에 따라 데이터가 연속적으로 흐르는 모습을 보여줍니다. 이번 글에서는 Chart.js를 사용하여 스트림 차트를 생성하는 방법에 대해 알아보겠습니다.

1. Chart.js 설치

Chart.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하는 경우 아래 명령어를 실행하여 Chart.js 패키지를 설치할 수 있습니다.

npm install chart.js

2. HTML 파일에 스트림 차트 그리기

스트림 차트를 그리기 위해 HTML 파일에 <canvas> 요소를 추가하고, 그 요소에 Chart.js를 활용하여 차트를 그립니다.

<!DOCTYPE html>
<html>
  <head>
    <title>스트림 차트 예제</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  </head>
  <body>
    <canvas id="streamChart"></canvas>
  </body>
</html>

3. JavaScript 파일에서 스트림 차트 데이터 설정

JavaScript 파일에서 Chart.js를 사용하여 스트림 차트에 표시할 데이터를 설정합니다. 아래는 예시 코드입니다.

var ctx = document.getElementById('streamChart').getContext('2d');
var streamChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: '실시간 데이터',
      data: [],
      borderColor: 'blue',
      fill: false
    }]
  },
  options: {
    scales: {
      x: {
        type: 'realtime',
        realtime: {
          duration: 20000, // 20초마다 데이터 갱신
          delay: 2000, // 2초 후에 그래프 시작
          refresh: 1000, // 1초마다 그래프 갱신
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

위 코드에서 data 배열에 실시간으로 표시할 데이터를 추가할 수 있습니다. borderColor 속성으로 그래프 선의 색상을 설정할 수 있으며, fill 속성을 false로 설정하여 그래프 아래를 비우도록 만들 수 있습니다.

options 객체 안의 x와 y 속성을 통해 축의 설정을 변경할 수 있습니다. realtime 속성을 사용하여 데이터 갱신 간격과 그래프 업데이트 간격을 설정할 수 있습니다.

4. 데이터 업데이트 및 그래프 갱신

스트림 차트는 실시간으로 데이터를 업데이트하고 그래프를 갱신하여 표시해야 합니다. 아래는 예시 코드입니다.

// 데이터 업데이트 및 그래프 갱신
setInterval(function() {
  var time = new Date().getTime();
  var value = Math.random() * 100; // 랜덤한 데이터 생성

  // 실시간 데이터 배열에 추가
  streamChart.data.datasets[0].data.push({ x: time, y: value });

  // 데이터의 개수를 일정 수로 제한하여 너무 많은 데이터가 표시되지 않도록 함
  var maxDataPoints = 50;
  if (streamChart.data.datasets[0].data.length > maxDataPoints) {
    streamChart.data.datasets[0].data.shift();
  }

  // 그래프 갱신
  streamChart.update({
    preservation: true // 그래프를 그리는 과정에서 이전 데이터를 유지
  });
}, 1000); // 1초마다 데이터 업데이트

위 예시 코드에서는 데이터를 1초마다 업데이트하고, 최대 데이터 개수를 50개로 제한하여 너무 많은 데이터가 표시되지 않도록 합니다. 그리고 preservation 속성을 true로 설정하여 그래프 업데이트 시 이전 데이터를 유지하는 기능을 활성화합니다.

이렇게하면 Chart.js를 사용하여 스트림 차트를 생성하고 실시간 데이터를 표시할 수 있습니다. Chart.js에 대한 더 자세한 정보는 공식 문서를 참조하시기 바랍니다.