javascript - 1秒显示100点 : Highcharts

Question

所以我有一个项目正在尝试更新图表。其中每秒显示 100 个点。

为此我正在尝试 this example来自 Highcharts。

但是图表停止响应此类事件。

代码:

jsfiddle

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 10);
            }
        }
    },

    time: {
        useUTC: false
    },

    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        headerFormat: '<b>{series.name}</b><br/>',
        pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});

Answer 1

您可以将 addPoint 方法中的 redraw 参数设置为 false，并以更长的间隔调用 chart.redraw():

chart: {
    ...,
    events: {
        load: function() {
            // set up the updating of the chart each second
            var series = this.series[0],
                chart = this;

            setInterval(function() {
                var x = (new Date()).getTime(), // current time
                    y = Math.random();
                series.addPoint([x, y], false, true);
            }, 10);

            setInterval(function() {
                chart.redraw();
            }, 500);
        }
    }
}

<小时/>

现场演示: https://jsfiddle.net/BlackLabel/s3gh6q5j/

API引用:

https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

https://api.highcharts.com/class-reference/Highcharts.Chart#redraw