7

jqPlotで描いたチャートを時間間隔で順次更新したい。

私の使用例は、AJAX 呼び出しが単一の値のみを返すようなものです。例：

1st AJAX call: 20
2nd AJAX call: 30
3rd AJAX call: 40
4th AJAX call: 32

だから私はグラフを次のようにプロットしたい：

First: only 20
Second: 20,30
Third: 20,30,40
Fourth: 20,30,40,32

JQPlot で既にプロットされたデータを抽出し、この新しいデータ セットを追加してグラフを再描画できますか??

誰でも助けてもらえますか??

4

2 に答える 2

14

データを配列に格納してから、各 ajax 呼び出し内で新しいデータを配列にプッシュする必要があります。

以下は、ボタンを使用して 3 秒間隔で AJAX 更新を開始する簡単なデモです。

/* store empty array or array of original data to plot on page load */

var storedData = [3, 7];

/* initialize plot*/

var plot1;
renderGraph();

$('button').click( function(){
    doUpdate();
    $(this).hide();
});

function renderGraph() {
    if (plot1) {
        plot1.destroy();
    }
    plot1 = $.jqplot('chart1', [storedData]);
}
/* sample data for demo*/   
var newData = [9, 1, 4, 6, 8, 2, 5];


function doUpdate() {
    if (newData.length) {
        /* used to pull new number from sample data for demo*/
        var val = newData.shift();

        $.post('/echo/html/', {
            html: val
        }, function(response) {
            var newVal = new Number(response); /* update storedData array*/
            storedData.push(newVal);
            renderGraph();               
            setTimeout(doUpdate, 3000)
        })

    } else {
        alert("All Done")
    }
}

デモ: http://jsfiddle.net/ZqCXP/

于 2012-12-01T16:33:33.267 に答える