代码之家 › 专栏 › 技术社区 › Ezequiel Flores

Flot时间序列线不工作

flot jquery

Ezequiel Flores · 技术社区 · 6 年前

我试图用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]);

它就像一个符咒。我错过了什么?

1 回复 | 直到 6 年前

Raidri 6 年前

这个 $.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);
});

推荐文章

NekoLopez · 在Flot图表线条工具提示中显示信息时出错

6 年前

Ezequiel Flores · Flot时间序列线不工作

6 年前

Václav · flot图表:无法读取未定义的属性“plugins”

6 年前

TanyaS · 带有多个yaxis和复选框的jQuery Flot

7 年前

Devyani Kotadiya · 如何在flot图表中设置工具提示文本颜色?

7 年前

Samuil Petrov kenza · Flot(Flot.js)仅填充图例中的条目

8 年前

Jigarb1992 · 在带有angularjs的浮动图表中,仅x轴刻度中的整数

8 年前

Huw · 格式化flot图形数组的json数据

8 年前

tuanptit · 在浮标图中1262304000000是多少?

8 年前

cr1zz · jQuery flot-当没有值时,不要在yaxis上显示-1

9 年前