3

私はjavascriptとflotが初めてで、誰かが私が抱えているこの問題を解決してくれることを願っています. 私が達成しようとしているのは、ページ上に動的フローグラフを持っていることです。

プロットされるシリーズのデータ​​は、数秒ごとに更新されるファイルにあります。flot グラフが数秒ごとにデータ ファイルを読み取り、新しいデータで更新されるようにします。

これが私が持っているコードで、動作していません。グラフはページの読み込みに問題なく表示されますが、5 秒ごとに更新されません。

どんな助けでも大歓迎です。

   $(function () {

var dataFolder = "http://localhost/graphdata/";

/***********************************************************************
 *             Function to get series data from a file
 ***********************************************************************/
function getSeriesData(file) {
    var url= dataFolder + file;
    var data = null;
    $.ajax({
        async: false,
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            data = datasets;
        },
        error: function(error,text,http){
            alert(error + " " + text + " " + http);
        }
    });  

    return data;
}
    var plot = $.plot($("#placeholder"),
        [
            {label: "A", data: getSeriesData("dataA.txt")},
            {label: "B", data: getSeriesData("dataB.txt")},
            {label: "C", data: getSeriesData("dataC.txt")}
        ],
        {
            series: {
                lines: {
                    color: "red",
                    show: true
                },
                points: {
                    show: true
                },
                shadowSize: 0,
                hoverable: true
            },
            colors: ["red", "blue", "green"],
            yaxis: {
                min: 0,  ticks:5
            },
            xaxis: {
                mode: 'time',
                timeformat: '%H:%m',
                show: false
            },
            legend:{
                show: true
            },
            grid:{
                color: "green",
                show: true,
                backgroundColor: "white",
                hoverable: true
            }
        }
);

var updateInterval = 1000 * 5;
function update() {

    plot.setData([
                          {label: "A", data: getSeriesData("dataA.txt")},
                          {label: "B", data: getSeriesData("dataB.txt")},
                          {label: "C", data: getSeriesData("dataC.txt")}
                      ]);
    plot.setupGrid();
    plot.draw();

    setTimeout(update, updateInterval);
}
update();});
4

3 に答える 3

1

私はそれを考え出した。ファイルの ajax 呼び出しはブラウザーにキャッシュされていたため、同じファイルに対するそれ以降の呼び出しはキャッシュから返され、グラフの更新が行われていないように見えました。関数内のキャッシュを切り替えると、現在は正常に動作します。

function getSeriesData(file) {
    var url= dataFolder + file;
    var data = null;
    $.ajax({
        async: false,
        cache: false,
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            data = datasets;
        },
        error: function(error,text,http){
            alert(error + " " + text + " " + http);
        }
    });  

    return data;
}
于 2013-03-14T23:31:06.747 に答える
0

数字を使用して正しく更新されているようです。データの例をいくつか挙げていただけますか?

x軸とデータプルを変更しましたが、更新はうまくいきました。

function getSeriesData() {

var randomnumber=Math.floor(Math.random()*11)
var randomnumber2=Math.floor(Math.random()*11)
var data = [ 
             [randomnumber, randomnumber2],
            [randomnumber +1, randomnumber2 +2],
            [randomnumber +3, randomnumber2 +4],
            [randomnumber +5, randomnumber2 +6],
            [randomnumber +7,  randomnumber2 +8],

];

return data; 
}

フィドル - http://jsfiddle.net/EX6d/1/

于 2013-03-14T16:20:09.320 に答える