1

我每 4 秒得到一个这样的 json 数据：

{
   "time": "04:49:07 AM",
   "milliseconds_since_epoch": 1375246147254,
   "date": "07-31-2013"
}

我正在处理它以获得这样的数组：

[[1375230673948, 0.6443498175195954]]

（第一个数据是一个js时间戳）

我正在尝试使用 flot 实时绘制这些数据：

function draw() {
    console.log('draw called');
    this.array = getTimeArray();
    $.plot(
    $("#placeholder"), [
        {
        label: "test Data",
        data: this.array,
        lines: {
            show: true,
            fill: true,
            fillColor: "rgba(249, 28, 61,0.3)",
            lineWidth: 2.5
        },
        }
    ], {
        xaxis: {
            mode: "time",
            timeformat: "%H:%M"
        },
        yaxis: {
            min: -2
        }
    });
}

function getTimeArray(flg) {

    var array = [],
    d = new Date(),
    tz = d.getTimezoneOffset();
    jsonUrl = 'http://date.jsontest.com/'
    var array2 = []
    $.getJSON(jsonUrl, function(data) {
        var i = 0;
            $.each(data, function(key, val) {
                if (typeof val === 'number'){
                    d = new Date(val - 5 * 60 * 1000);
                    array2.push([d.getTime()- tz*60*1000,Math.random()]);
                    console.log(array2)
                    i++;
                }
            });
     });

    for (var i = 9; i >= 0; i--) {
        d = new Date(d.getTime() - 5 * 60 * 1000);
        array.push([d.getTime() - tz*60*1000, Math.random()]);
    }
    return array;
}

draw();
setInterval(draw, 4000);

http://jsfiddle.net/gKRPX/28/

但我还不能得到它，请有人帮助我吗？

我需要绘制时间序列及其值从 json 获取数据。也许使用另一个库可以更容易地达到它，欢迎任何帮助..

4

1 回答 1

2

您的代码的问题是$.getJSON调用是异步的，因此如果您尝试返回array2（在 jsFiddle 中），它是一个空列表。从服务器获取 JSON 数据后，您需要使用success回调或.done()方法来绘制绘图：

$.getJSON(jsonUrl, function (jdata) {
    var i = 0;
    $.each(jdata, function (key, val) {
        if (typeof val === 'number') {
            d = new Date(val - 5 * 60 * 1000);
            if (array.length > 9) {
                array.shift();
            }
            array.push([d.getTime() - tz * 60 * 1000, Math.random()]);
            i++;
        }
    });

}).done(function (jdata) {
    data[0]["data"] = array;
    $.plot($("#placeholder"), data, options);
});

你可以看到完整的 jsFiddle。我一直推到数组并在它的长度超过 9 时移动它，只是为了说明。

您还可以使用浮点图的setData和draw方法来避免每次都绘制该图，但这是一个不同的问题。

于 2013-07-31T14:30:08.447 回答