【Highcharts】Spline updating each secondについて
HighchartsのSpline updating each secondというので、動的に更新するグラフを作ったのでメモします。
まずはベーシックにポイントが一つの場合(JSFiddle)
ポイントが2つの場合
注意すべき点は2つ目のポイントのaddPointメソッドで第二引数をfalseにしたほうがよい。
falseにした場合が上のgif。
trueにした場合が下のgif。
下のgifはアニメーションがカクつく…
chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 10, events: { load: function () { var series = this.series[0]; var series1 = this.series[1]; setInterval(function () { var x = (new Date()).getTime(), // current time y = Number($('#val').text()); y1 = Math.random() * 100; //↓1つ目のポイント。addPointの第二引数をfalseにする。 series .addPoint([x, y], false, true); //↓2つ目のポイント。addPointの第二引数をtrueにする。 series1.addPoint([x, y1], true, true); }, 2000); } } },