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时间序列行不起作用

1 个答案: