Json to DataTable for Google 可视化错误输出

Question

我正在尝试使用来自 CSV 的 Google 可视化来创建图表。我已经使用 PHP 解析了 CSV 文件，并将我需要的数据输出为 Json。具体来说，第 1 列包含格式为“dd/mm/yyyy”的日期，第 2 列包含格式为 2 d.p 的价格。如下所示：

[["Date","Close"],
["29\/01\/1985","1,292.62"],
["30\/01\/1985","1,287.88"],
["31\/01\/1985","1,286.77"],

...

["30\/04\/2015","17,840.52"],
["01\/05\/2015","18,024.06"]]

正如您在上面看到的，代码包含名为“Date”和“Close”的标题。我有两个文件，一个包含名为“json.php”的 Json 代码，第二个名为“chart.php[=35” =]" 包含通过 Ajax 调用 Json 代码的脚本。第二个文件中的代码如下所示：

<html> <head> <title>Google Chart</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script> <script type='text/javascript'> google.load('visualization', '1', { 'packages': ['annotationchart'] }); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "json.php", dataType: "json", async: false }).responseText; var array = JSON.parse(jsonData); var data = new google.visualization.arrayToDataTable(array); var chart = new google.visualization.AnnotationChart(document.getElementById('chart')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id="chart" style="width: 900px; height 500px;"></div> </body> </html>

我的问题是，执行脚本并刷新网站后，图表没有出现，而是出现错误，指出数据必须至少有两列。我将数据直接放入 div 使用：

document.getElementById("chart").innerHTML = data;

似乎发生的是 Json 代码未转换为 DataTable 而是显示：

[object Object]

我尝试将 Json 代码直接放入 DataTable 中，而没有在使用前将其转换为数组：

var data = new google.visualization.DataTable(jsonData);

并且输出仍然相同，出现 [object Object]。我返回并将从调用中接收到的数据直接放入 div 并且 Json 显示正常。问题似乎是转换为 DataTable，我不知道为什么。真的很感谢任何提示。谢谢！！

Answer 1

我认为你这里有一些问题。

当您有 dataType : 'json' 时，JSON.parse 是多余的。 JSON.parse 用于将字符串 解析为 JSON。
您需要以 date 和 number 格式定义 som 数据类型才能创建 AnnotationChart。 Google 无法猜测哪些列和哪些数据是什么。它需要指定列并根据列数据类型以正确的格式传送数据。
JSON 中的数据本身格式不正确。日期无法立即解析，数字将被解析为字符串。

所以忘记 JSON.parse 和魔法 JSON -> 数组 -> AnnotationChart 能够使用的适当的 DataTable。改为这样做：

var row, date, data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Close');
for (var i=1;i<jsonData.length;i++) {
    row = jsonData[i];
    date = row[0].split('/');
    data.addRow([
        new Date(date[2], date[1], date[0]), 
        parseFloat(row[1])
    ]);
}

你的代码来自 fiddle -> http://jsfiddle.net/mvjcff8c/

Json to DataTable for Google 可视化错误输出

Json to DataTable for Google Visualization wrong output

javascript

php

csv

json

google-visualization