实时绘制与Flot和AJAX -不绘图

Plotting realtime with Flot and AJAX - Doesn't plot

本文关键字：绘图 AJAX 绘制 Flot 实时      更新时间：2023-09-26

我试图使用flot JQuery库绘制时间数据，但它根本没有。

目标是从JSON文件中获取数据，如: 
{
"dados": 150
}

我使用的方法是kinda:

function getData() {
        $.ajax({
            type: 'GET',
            url: './data/realtime.json',
            dataType: "json",
            success: function (aferido){
                console.log("Data received. -> var aferido.dados: ", aferido.dados);
                data.push([Date.now(), aferido.dados]); //push something like [timestamp ,value]
                console.log("Data pushed. -> var data: ", data);
                interactive_plot.setData(data);
                interactive_plot.draw();
            }
        });
    }

在控制台中，"data"变量是正确的，在每次更新中增加。例:

数据推。-> var data: [Array[2]， Array[2]， Array[2]， Array[2]， Array[2]，数组[2],[2]数组,数组[2],[2]数组,数组[2],[2]数组,数组[2],数组[2],[2]数组,数组[2],[2]数组,数组[2],[2]数组,数组[2],数组[2],[2]数组,数组[2],[2],[2]数组,数组[2]]

但是图形保持静态。光吗?我已经尝试更改setData参数，包括数组括号，但问题仍然存在。

它是静态的原因是因为这就是flot的工作原理——当你添加新值时，它不会自动移动x轴

由于你使用时间作为y轴，它不断上升，所以你需要在飞行中改变网格并使其滚动(自动推进)。

检查这个简单的JSbin

    function getRandomData() {
      res.push([i, Math.random()*50])
      i++;
      return res;
    }

    function update() {
      plot.setData([getRandomData()]);
      //Make the x asis move as i increases
      axes = plot.getAxes();
      axes.xaxis.options.max = i;      //also try Math.max(100,i); //Starts to advance after the graph is filled
      axes.xaxis.options.min = i-100;  //and Math.max(0, i-100); 
      plot.setupGrid();
      plot.draw();
      setTimeout(update, updateInterval);  
    }
另外，看看这个示例页面——ajax和实时更新
相关文章：