动态图表无法正常工作（highcharts）？

Question

我遇到的问题是，与蓝线相比，黑线正在做一些时髦的事情。如果你在中间或其他地方滚动（使用底部滚动工具），你可以清楚地看到黑线正在改变它的形状，而蓝线保持它的形状，奇怪。这仅在您使用滚动工具时发生。

如何防止黑线改变形状？复制这段代码并替换为 JSfiddle 以查看问题：

$(function () {

    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    // Create the chart
    $('#container').highcharts('StockChart', {
        chart : {
            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.round(Math.random() * 100);
                        series.addPoint([x, y], true, true);
                    }, 1000);

                    var series1 = this.series[1];
                    setInterval(function () {
                        var x = (new Date()).getTime(), // current time
                            y = Math.round(Math.random() * 100);
                        series1.addPoint([x, y], true, true);
                    }, 1000);
                }
            }
        },

        rangeSelector: {
            buttons: [{
                count: 1,
                type: 'minute',
                text: '1M'
            }, {
                count: 5,
                type: 'minute',
                text: '5M'
            }, {
                type: 'all',
                text: 'All'
            }],
            inputEnabled: false,
            selected: 0
        },

        title : {
            text : 'Live random data'
        },

        exporting: {
            enabled: false
        },

        series : [{
            name : 'diagram1',
            data : (function () {
                // generate an array of random data
                var data1 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data1.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data1;
            }())
        },
        {
            name : 'diagram2',
            data : (function () {
                // generate an array of random data
                var data2 = [], time = (new Date()).getTime(), i;

                for (i = -999; i <= 0; i += 1) {
                    data2.push([
                        time + i * 1000,
                        Math.round(Math.random() * 100)
                    ]);
                }
                return data2;
            }())
        }]
    });

});

我唯一做的就是在图表中添加一条额外的动态线（黑色）。这是没有黑线的原始代码。 Review original code

Answer 1

黑线移动的原因是图表的重绘和动画功能。由于某些原因，第一个系列（蓝线）在调用 addPoint 后不显示动画，因此您看不到运动。 addPoint函数中的第二个参数是redraw。对于第二个系列（黑线）将其设置为 false 将在更新点时停止移动：

series1.addPoint([x, y], false, true);

这是 DEMO。

动态图表无法正常工作（highcharts）？

Dynamic chart is not working properly (highcharts)?

javascript

jquery

highcharts