在样式图上更新两条线 [英] Updating spline chart two lines on top of eachother

问题描述

我在单个图中显示了两行，每次更新它们的值都保存到全局变量中（都有不同的全局变量）。代码示例可以在这里找到： jsFiddle示例。

正如你所看到的，两条线彼此重叠，即使它们在 ymin 和 ymax 被添加到行中（你可以在控制台中看到）。
$ b

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

有人知道为什么这些线条彼此重叠，而它们的值明显不同吗？更重要的是：我怎样才能在保持流畅动画的同时解决这个问题？前面的（可能相关的）问题：图表在间隔的两行添加值时不流利地移动。

解决方案

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

  function generateArray（）{
 var emptyarray = []，
 time =（new Date（））。getTime（），
i; 
 
 for（i = -50; i <= 0; i ++）{
 emptyarray.push（{
x：time + i * 1000，
y：230 
}）; 
} 
返回emptyarray; 
 
 $ b $ graphinfo.series = [{
 name：'Minimum Voltage'，
 data：generateArray（），
 color：'#FFFFDD' 
}，{
 name：'Maximum Voltage'，
 data：generateArray（），
 color：'＃B72E8D'
}]; 
  

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

I am showing two lines in a single graph updating them each second with a value that is saved into a global variable (both have different global variables). An example of the code can be found here: jsFiddle example.

As you can see the two lines are on top of each other, even though they have different values when the ymin and ymax are added to the lines (you can see this in the console).

The cause appears to be in the first addPoint call (line 118). If the first boolean is set to true (like the second addPoint call) the lines are shown correctly but the animation is wrong: jsFiddle example.

Does anyone know why the lines are on top of each other while their values are obviously different? And more importantly: how can I fix this while keeping the smooth animation?

Previous (possibly related) question: Chart not moving fluently when adding value to two lines on interval.

解决方案

The problem is with using the same variable emptyarray for both series. This is known issue with Highcharts (roported on github) that Highcharts overwrites some of options passed to the chart. Possible solution is to use function which will return that empty array, for example:

    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'
    }];

Working jsFiddle: http://jsfiddle.net/XAHa4/2/

这篇关于在样式图上更新两条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！