0

グローバル変数に保存された値で毎秒更新する 1 つのグラフに 2 つの線を表示しています (両方とも異なるグローバル変数を持っています)。コードの例は、jsFiddle の例にあります。

ご覧のとおり、yminとymaxが行に追加されたときの値は異なりますが、2 つの行が重なり合っています (これはコンソールで確認できます)。

原因は、最初の addPoint 呼び出し (118 行目) にあるようです。最初のブール値が true に設定されている場合 (2 番目の addPoint 呼び出しのように)、線は正しく表示されますが、アニメーションは正しくありません: jsFiddle の例.

値が明らかに異なるのに、線が重なっている理由を知っている人はいますか? さらに重要なことは、スムーズなアニメーションを維持しながらこれを修正するにはどうすればよいでしょうか?

前の (おそらく関連する) 質問: interval の 2 つの線に値を追加すると、チャートがスムーズに移動しません。

4

2 に答える 2

1

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
            });
        }
        return emptyarray;
    }

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

jsFiddle の作業: http://jsfiddle.net/XAHa4/2/

于 2013-06-05T12:22:01.203 に答える