Question

我正在使用更新样条图表来显示每秒更改的行。更改在chartinfo.chart.events.load中设置。下面是我在实际程序中使用的代码：

chartinfo.chart.events.load: function() {
    powerLine = this.series[0];
    setInterval(function() {
        var x = (new Date()).getTime(), // current time
        y = ((latestPowerValue > maxPower) ? maxPower : ((latestPowerValue < minPower) ? minPower : latestPowerValue)); //Math.random() * 250;
        powerLine.addPoint([x, y], true, true);
    }, 1000);
}

我有另一个更新样条图表，显示两行也会每秒更改一次。这几乎与上面的例子相同，但这次更新了两个系列。

chartinfo.chart.events.load: function() {
    var minLine = this.series[0];
    var maxLine = this.series[1];

    setInterval(function() {
        var x = (new Date()).getTime();
        var ymin = ((latestVoltageMin > maxVoltage) ? maxVoltage : ((latestVoltageMin < minVoltage) ? minVoltage : latestVoltageMin));
        var ymax = ((latestVoltageMax > maxVoltage) ? maxVoltage : ((latestVoltageMax < minVoltage) ? minVoltage : latestVoltageMax));

        minLine.addPoint([x, ymin], true, true);
        maxLine.addPoint([x, ymax], true, true);
    }, 1000);
};

我还在jsFiddle中准备了the single lined (working) graph和the double lined (not working) graph的工作示例。

我想了解如何使单线图移动/滑动，就像单线图一样。欢迎任何帮助或洞察这个问题！

Answer 1

将第一个添加点的animate参数设置为false，第二个添加点将为它们设置动画。

series.addPoint([x, y], false, true);
series2.addPoint([x, y2], true, true);

jsFiddle

Answer 2

除了 series.addPoint（[x，y]，false，true）; series2.addPoint（[x，y2]，true，true）;

也写下chart.redraw（）;在series2.addPoint（[x，y2]，true，true）之后; 这使得它在webapp中适用于我

在间隔上向两行添加值时，图表不会流畅地移动

2 个答案: