带有 json 输入的谷歌可视化

Question

作为一名初学者，我正在努力使用 Google Visualization 从 JSON 文件输入制作图表。我搜索过类似的问题，但不确定是否有帮助。

我有一组 JSON 格式的数据。目前它是静态数据并存储在本地。我想加载数据并使用 Google 可视化对其进行可视化。我的数据是这样的：

     "rows":[{"Time":10:00:00,"Lat":53.02900044,"Long":7.44578671,"Altitude":57,"Speed":0,...}, {"Time": 11:00:00,"Lat":52.06000044,"Long":7.54578671,"Altitude":53,"Speed":12,...]}

我尝试使用这种方式：

    function init () {

var json3 = (function () {
    var json3 = [];
    $.ajax({
        'async': false,
        'global': false,
        'url': "Person3.json",
        'dataType': "json",
        'success': function (data3) {
            json3 = data3.rows;
        }
    });
    console.log("Number of message rows: " + json3.length);
    return json3;
})();
var readings3 = [];
if (json3.length > 0)
    var readings3 = json3;
    else
    readings3=[
        {"Time":"10:00:00 ","Lat":66.02794563,"Long":7.45527353,.....},
        {"Time":"13:40:52 ","Lat":66.16435456,"Long":7.98108809,......}
        ]
var data3 = new google.visualization.DataTable(readings3);

var graphview = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'visualization1',

    dataTable: data3,
options: {
        // chart options
    }
});

graphview.draw();    
}
google.load('visualization', '1', {packages:  ['corechart'], callback: init});

有人可以帮助我这里缺少什么，或者如果您看到类似的问题正在解决。 提前谢谢...

Answer 1

DataTable 构造函数不会接受具有该结构的对象；您必须手动将该对象解析为 DataTable：

var data3 = new google.visualization.DataTable();
data3.addColumn('timeofday', 'Time');
data3.addColumn('number', 'Lat');
data3.addColumn('number', 'Long');
//...
for (var i = 0; i < readings3.length; i++) {
    var match = readings3[i].Time.match(/(\d{2}):(\d{2}):(\d{2})/);
    var hours = parseInt(match[1], 10);
    var minutes = parseInt(match[2], 10);
    var seconds = parseInt(match[3], 10);
    data.addRow([[hours, minutes, seconds, 0], readings3[i].Lat, readings3[i].Long, /* ... */]);
}

此外，如果不是复制/粘贴错误，则需要引用 JSON 字符串中的时间，因为 "Time":10:00:00 无效。