Question

我在一个图表中显示两行，每秒更新一行，并将值保存到全局变量中（两者都有不同的全局变量）。可以在此处找到代码的示例：jsFiddle example。

正如您所看到的那样，两条线在彼此之上，即使它们在ymin和ymax被添加到线条时它们具有不同的值（您可以在控制台中看到这一点）

原因似乎是在第一个addPoint调用中（第118行）。如果第一个布尔值设置为true（就像第二个addPoint调用一样），则行显示正确，但动画错误：jsFiddle example。

有人知道为什么线条相互叠加而它们的值明显不同吗？更重要的是：如何在保持平滑动画的同时解决这个问题？

之前（可能相关）的问题：Chart not moving fluently when adding value to two lines on interval。

Answer 1

问题在于为两个系列使用相同的变量emptyarray。这是Highcharts（在github上的roported）的已知问题，Highcharts会覆盖传递给图表的一些选项。可能的解决方案是使用将返回该空数组的函数，例如：

    function generateArray(){
        var emptyarray = [],
            time = (new Date()).getTime(),
            i;

        for (i = -50; i <= 0; i++) {
            emptyarray.push({
                x: time + i * 1000,
                y: 230
            });
        }
        return emptyarray;
    }

    chartinfo.series = [{
        name: 'Minimum Voltage',
        data: generateArray(),
        color: '#FFFFDD'
    }, {
        name: 'Maximum Voltage',
        data: generateArray(),
        color: '#B72E8D'
    }];

工作jsFiddle：http://jsfiddle.net/XAHa4/2/

Answer 2

使用setInerval函数看起来很奇怪，因为缩小的示例http://jsfiddle.net/DxqUj/正常工作。

更新样条图两条线在彼此的顶部

2 个答案: