[javascript] Highcharts에서 실시간 데이터 업데이트하기

27 Nov 2023

javascript

개요

Highcharts는 웹 기반의 인터랙티브한 차트를 생성할 수 있는 강력한 JavaScript 라이브러리입니다. Highcharts를 사용하여 실시간으로 데이터를 업데이트하는 방법을 알아보겠습니다. 실시간 데이터 업데이트는 주로 주식 시세, 센서 데이터 등과 같이 지속적으로 변화하는 데이터를 시각화하는 데 사용됩니다.

Highcharts에서 실시간 데이터 업데이트하기

먼저 Highcharts 라이브러리를 포함하는 <script> 태그를 HTML 파일에 추가합니다. 다음은 CDN을 통해 Highcharts 라이브러리를 가져오는 예시입니다.
```
<script src="https://code.highcharts.com/highcharts.js"></script>
```

Highcharts 차트를 생성하는 JavaScript 코드를 작성합니다. 이때, 초기 데이터를 지정하고 실시간 데이터 업데이트를 수행할 엘리먼트를 지정해야 합니다. 아래 예시는 실시간으로 업데이트되는 선 그래프를 생성하는 코드입니다.

// 초기 데이터
var initialData = [10, 20, 30, 40, 50];

// 실시간 데이터 업데이트 함수
function updateChart() {
  var newData = Math.random() * 100; // 새로운 데이터 생성

  // 차트 데이터 업데이트
  chart.series[0].addPoint(newData, true, true);
     
  setTimeout(updateChart, 1000); // 1초마다 업데이트 수행
}

// Highcharts 차트 생성
var chart = Highcharts.chart('chart-container', {
  series: [{
    type: 'line',
    data: initialData
  }]
});

// 실시간 데이터 업데이트 시작
updateChart();

위의 코드에서 chart-container는 차트를 렌더링할 HTML 엘리먼트의 ID입니다.

updateChart 함수는 1초마다 새로운 데이터를 생성하고 차트의 데이터를 업데이트합니다. setTimeout 함수를 사용하여 1초마다 updateChart 함수를 호출합니다.
실시간 데이터 업데이트를 테스트하기 위해 간단한 웹 서버를 실행시키고 웹 브라우저를 엽니다. 차트가 나타나며 1초마다 새로운 데이터로 업데이트됩니다.

마무리

위의 예시를 참고하여 Highcharts에서 실시간 데이터 업데이트를 구현할 수 있습니다. 이를 활용하여 다양한 실시간 데이터 시각화를 구현해보세요. Highcharts에는 다양한 차트 유형과 옵션을 제공하므로 원하는 스타일과 기능을 쉽게 적용할 수 있습니다.

개요

Highcharts에서 실시간 데이터 업데이트하기

마무리

참고 자료