首页 > 解决方案 > Chart.js 与 getjson

问题描述

我想用我用 getjson 查询的 json 数据用 chart.js 绘图。

下面的代码给了我和空的情节。但是,如果我用 alert(ddata.length); 取消注释该行 它不仅以 0 弹出,而且这次情节正确出现 - 令人困惑的行为。使用chart.js 2.6.0 jquery 3.3.1。

var ddata = [];
//var labels = [];

$.getJSON("http://192.168.1.143/json_request", function(jdata){
    $.each(jdata, function(i, d){
        ddata.push({"x":d.timestamp, "y": d.x0});
        //labels.push(String(d.timestamp));
    });
});

//alert(ddata.length); // <-- Works if uncommented !!!
//console.table(ddata);

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        //labels: labels,
        datasets: [{
            label: 'h1px2',
            data: ddata,
            backgroundColor: 'rgba(0, 0, 255, 0.2)',
            borderColor: 'rgba(0,0,255,1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            xAxes: [{
                type: 'linear'
            }]
        }
    }
});

一个json样本:

[{"timestamp": 1528828783,"x0": 246.21,"x1": 1.16,"x2": 11.47,"x3": 8.62,"x4": -127.00},
{"timestamp": 1528828793,"x0": 245.75,"x1": 1.37,"x2": 15.41,"x3": 4.93,"x4": -127.00}, etc...

您能告诉我如何正确绘制此图吗?

标签: javascriptjsonchart.jsgetjson

解决方案


推荐阅读