javascript - 使用 Flot 和 AJAX 实时绘图 - 不绘图

Question

我正在尝试使用 flot JQuery 库绘制时间数据，但事实并非如此。

目标是从 JSON 文件中获取数据，例如:

{
"dados": 150
}

我使用的方法有点:

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 pushed. -> var data: [Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2]]

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

Answer 1

它是静态的原因是因为这就是 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);  
    }

此外，请查看 this example page - ajax和实时更新