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”变量没有问题，每次更新都会增加。例如：

推送数据。 - ＆GT; 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

它是静态的原因是因为它是如何工作的 - 当你添加新值时它不会自动移动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和实时更新

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

1 个答案:

检查这个简单的JSbin