3

我是 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();});
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/EX6dv/1/

于 2013-03-14T16:20:09.320 回答
0

看来您也需要将以下内容放在更新功能之外。

setTimeout(update, updateInterval);
于 2013-04-24T06:27:04.580 回答