0

プロジェクトでは、jqPlot を使用してライブ更新グラフを実装する必要があります。

次の jsFiddle を参照してください: http://jsfiddle.net/fracu/HrZcj/242/ (単純にするために、値はランダムに生成されます)

ジョブを正常に実行できましたが、パフォーマンスの問題があります。グラフを実行して数分後、グラフのタブを閉じる瞬間までブラウザーの速度が低下し始めます。(Firefox と Chrome でテスト済み)

特別なことは何もしていないので、グラフの値が格納されている配列を使用して n 秒ごとにグラフを再プロットするだけなので、どこに問題があるのか​​ わかりません。

私が抱えているもう1つの問題は、x軸のサイズを変更すると、「目盛り」がチャートの左側に配置され、軸に沿って均等に分散されないことです。

何が起こっているのか、手がかりを教えてください。

前もって感謝します！

Javascript:

    var plot1 = $.jqplot('chart1', [new Array(1)], {
        series: [{yaxis:'y2axis',showMarker:true,fill:false,neighborThreshold:3,rendererOptions:{smooth:true}}],
        axes: {
            xaxis: {renderer: $.jqplot.DateAxisRenderer,tickOptions:{formatString:'%H:%M:%S'}},
            y2axis:{tickOptions:{formatString:'%.2f'}}
        },
    });

    var myData = [], x, y, samples = 0, secsBuffer = 60, refreshInterval = 1, sampleWindow = secsBuffer / refreshInterval;

    $("#refreshInterval").change(function () {
        clearInterval(cInt);
        cInt = window.setInterval(updateSeries, $("#refreshInterval").val() * 1000);
        refreshInterval = $("#refreshInterval").val();
        sampleWindow = secsBuffer / refreshInterval;
    });

    $("#secsBuffer").change(function () {
        secsBuffer = $("#secsBuffer").val();
        sampleWindow = secsBuffer / refreshInterval;
    });

    function updateSeries() {
        if (samples > sampleWindow) {
            var diff = samples - sampleWindow;
            myData.splice(0, diff);
            samples -= diff;
        }
        x = (new Date()).getTime();
        y = Math.floor(Math.random() * 100);
        myData.push([x, y]);

        plot1.resetAxesScale();
        plot1.axes.xaxis.numberTicks = 15;
        plot1.axes.y2axis.numberTicks = 15;
        plot1.axes.xaxis.min = x - (secsBuffer * 1000);
        plot1.axes.xaxis.max = x;
        plot1.series[0].data = myData;
        plot1.replot();
        samples++;
    }
    cInt = window.setInterval(updateSeries, refreshInterval * 1000);
4

1 に答える 1

0

これは、プロットには何らかの処理が必要であり、データが増えると処理が増えるという事実によるものだと思います。これが、しばらくするとブラウザの速度が低下する理由です。

プロットが特定の時間範囲に達した後、データ配列の先頭からシフトを開始することをお勧めします。

if(time limit has reached) myData.shift();

それは最善の解決策ではないかもしれません。ただし、ブラウザーをクラッシュさせることなく、過去 10 分間 (または配列のトリミングを開始することを決定した任意の期間) のデータをプロットで表示することができます。

于 2012-12-07T14:34:26.277 に答える