使用Ajax实现动态Flot图表

Question

我刚开始学习JavaScript和Flot，希望有人能帮我解决这个问题。我想在页面上实现一个动态的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();});

- AndyB

Answer 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;
}

- AndyB

Answer 2

看起来你需要把以下代码放在 update 函数之外。

setTimeout(update, updateInterval); 

- JavaSun

Answer 3

在数字方面，它似乎对我更新正确。你能提供一些数据示例吗？

我更改了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; 
}

fiddle - http://jsfiddle.net/EX6dv/1/

- Blake

---

是的，我在测试更新功能时尝试过了，它工作得很好。当我使用一个ajax调用从文件中读取数据时会出现问题。例如存储在文件中的数据是[[1,123],[2,234],[3,345],[4,532]]。 - AndyB