2


非同期呼び出しで外部データを jqplot にロードする方法はありますか?
毎分更新されるライブ グラフが必要ですが、async:false を使用すると、データがサーバーから受信されるたびにページがフリーズします。

4

1 に答える 1

4

例でそのようにした理由は、単純化のためです。以下はthisの非同期リワークです:

var plot2 = null;

function fetchAjaxData(url, success) {
    $.ajax({
        url: url,
        dataType:"json",
        success: function(data) {
            success(data);
            console.log('loaded');
        }
    });
}

function createPlot(url) {
    fetchAjaxData(url, function(data) {
        if (plot2 == null) {
            plot2 = $.jqplot('chart2', data, {
                title: "AJAX JSON Data Renderer"
            });
        } else {
            plot2.replot({data: data});
            console.log('replotting');
        }
    });
}

$(document).ready(function(){
    var jsonurl = "./jsondata.txt";

    //Regenerate the plot on button click.
    $('#ajax-button').click(function() {
        createPlot(jsonurl);
    });

    //Generate the plot first time through.
    createPlot(jsonurl);
});

そしてHTMLで:

<div id="chart2" style="height:300px; width:500px;"></div>
<button id="ajax-button">Ajax retrieve</button>

つまり、これが行うことは、Ajax 呼び出しが成功したときにデータを非同期に取得してプロットすることです。簡単にするために、同じテキスト ファイルをリロードするだけですが、これはライブ データ ストリームをプロットするシナリオに簡単に適用できます。

于 2013-02-21T20:52:57.700 に答える