Spline차트에서 데이터를 실시간으로 업데이트합니다.
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);
});
version | desc |
---|---|
7.3.0.0 |