使用 Ajax 的动态 Flot 图表答案

【问题标题】：Dynamic Flot chart using Ajax使用 Ajax 的动态 Flot 图表
【发布时间】：2013-04-24 14:27:04
【问题描述】：

我是 javascript 和 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();});

【问题讨论】：

标签： ajax dynamic flot

【解决方案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;
}

【讨论】：

【解决方案2】：

对于我来说，使用数字似乎可以正确更新。能否提供一些数据示例？

我更改了 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/EX6dv/1/

【讨论】：

是的，我在测试更新功能时尝试过，它工作正常。当我使用 ajax 调用从导致问题的文件中读取数据时。存储在文件中的示例数据为 [[1,123],[2,234],[3,345],[4,532]]

【解决方案3】：

看来你也需要把更新功能放在后面。

setTimeout(update, updateInterval);

【讨论】：