Flot 时间序列线不起作用

Question

我正在尝试使用 Flot 绘制一些数据，以 JSON 格式从 API 中检索数据。

    $.getJSON(jsonURL, function(result){            
        $.each(result, function(key, val){
            var fecha = parseFloat(new Date(val.fecha).getTime());
            var temp= parseFloat(val.tempsensada1);
            d1.push([fecha,temp]);          
        });
    });
    var data1 = [{ data: d1, label: "d1" }];
    var options = {
    canvas: false,
    xaxes: [
        { mode: "time" }
    ],
    yaxes: [
        { min: 0 }          
    ],
    legend: { position: "sw" }
};
$.plot("#box-four-content", data1,options);

问题是没有画线。但是当我用一些虚拟数据填充我的 d1 并且没有像这样解析 JSON 时：

d1.push([new Date("2018-02-10 08:00:00").getTime(), parseFloat("3.8")]);
d1.push([new Date("2018-02-11 09:00:00").getTime(), parseFloat("8")]);
d1.push([new Date("2018-02-12 10:00:00").getTime(), parseFloat("10")]);
d1.push([new Date("2018-02-12 10:10:00").getTime(), parseFloat("4")]);
d1.push([1520344993000, 18]);

它就像一个魅力。我在这里错过了什么？

Answer 1

$.getJSON()函数是异步的，也就是说d1数组是在请求完成后才填充数据的。但是当 d1 仍然为空时，您的其余代码会在请求启动后立即执行。（有关详细信息，请参阅 this answer。）

要修复您的代码，您必须将图表的所有代码放入回调函数中，如下所示：

$.getJSON(jsonURL, function(result){            
    $.each(result, function(key, val){
        var fecha = parseFloat(new Date(val.fecha).getTime());
        var temp= parseFloat(val.tempsensada1);
        d1.push([fecha,temp]);          
    });
    var data1 = [{ data: d1, label: "d1" }];
    var options = {
        canvas: false,
        xaxes: [
            { mode: "time" }
        ],
        yaxes: [
            { min: 0 }          
        ],
        legend: { position: "sw" }
    };
    $.plot("#box-four-content", data1,options);
});

Flot 时间序列线不起作用

Flot time series line not working

jquery

flot