1

更新スプライン チャートを使用して、1 秒ごとに変化する線を表示しています。変更は 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);
}

毎秒変化する 2 つの線を表示する別の更新スプライン チャートがあります。これは上記の例とほぼ同じですが、今回は 2 つのシリーズが更新されています。

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 で単線(動作) グラフと二重線 (非動作) グラフの動作例を用意しました。

二重線グラフを単線グラフのように移動/スライドさせる方法を知りたいです。問題へのヘルプや洞察は大歓迎です!

4

2 に答える 2

2

最初の追加ポイントのアニメーション パラメーターを false に設定すると、2 番目の追加ポイントが両方に対してアニメーション化されます。

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

jsフィドル

于 2013-06-04T12:48:53.090 に答える
1

series.addPoint([x, y], false, true); に加えて series2.addPoint([x, y2], true, true);

chart.redraw(); も書いてください。series2.addPoint([x, y2], true, true); の後 これにより、webappで機能します

于 2017-12-12T06:26:03.323 に答える