Spline Update (special Chart)

Spline차트에서 데이터를 실시간으로 업데이트합니다.

Example


var options = {
    chart: {
      type: 'spline',
    }
}
myChart.setOptions(options, {append : true, redraw:true});
var series = myChart.series(0);
// 최대 표현 갯수 지정
var maxDataPoints = 20;
// interval을 활용하여 데이터를 업데이트
this.refreshInterval = setInterval(function () {
  var x = (new Date()).getTime(), // 현재시간
      y = Math.random(); //랜덤 데이터
  var isRedraw = series.getData().length >= maxDataPoints;
  if (series != -1) series.addPoint([x, y], {append:true, redraw:isRedraw});
  if (series.getData().length > maxDataPoints) {
    // 최대 갯수를 넘어가면 첫번째 데이터 삭제
    series.getData()[0].remove();
  }
}, 1000);

/** Highcharts에서는 addPoint 이벤트에서 데이터 업데이트 후 pulse효과를 주고있음.
 * 그러나 현재 IBChart에서는 addPoint 이벤트가 존재하지 않음.
 * addPoint 이벤트가 추가 되기 전까지는 Highchart의 addPoint를 활용.
 **/
Highcharts.addEvent(Highcharts.Series, 'addPoint', e => {
  const point = e.point,
      series = e.target;

  if (!series.pulse) {
      series.pulse = series.chart.renderer.circle()
          .add(series.markerGroup);
  }

  setTimeout(() => {
      series.pulse
          .attr({
              x: series.xAxis.toPixels(point.x, true),
              y: series.yAxis.toPixels(point.y, true),
              r: series.options.marker.radius,
              opacity: 1,
              fill: series.color
          })
          .animate({
              r: 20,
              opacity: 0
          }, {
              duration: 1000
          });
  }, 1);
});

s

Since

version desc
7.3.0.0