Kazuki.io

プログラミングやITガジェットなどの備忘録だよ。人の役に立てばいいな。

【Highcharts】Spline updating each secondについて

HighchartsのSpline updating each secondというので、動的に更新するグラフを作ったのでメモします。

まずはベーシックにポイントが一つの場合(JSFiddle)
f:id:kazukisaito:20190208193126g:plain

ポイントが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);
                }
            }
        },

f:id:kazukisaito:20190208194141g:plain

f:id:kazukisaito:20190208194859g:plain