我正在尝试使用 Google Visualization 从 CSV 创建图表。我已经使用 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”，其中包含通过 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 就按其应有的样子出现了。问题似乎是转换为数据表，我不知道为什么。真的很感谢任何提示。谢谢!!
最佳答案
我认为您这里有一些问题。
- 当您有
dataType : 'json'时，JSON.parse是多余的。JSON.parse用于将字符串解析为 JSON。 - 您需要以
date和number格式定义一些数据类型才能创建AnnotationChart。 Google 无法猜测哪些列和哪些数据是什么。它需要指定列并根据列数据类型以正确的格式传递数据。 - JSON 中的数据本身格式不正确。日期无法立即解析，数字将被解析为字符串。
所以忘记 JSON.parse 和 AnnotationChart 能够使用的神奇 JSON -> 数组 -> 适当的 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/
关于javascript - Google Visualization 的 Json 到 DataTable 错误输出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30010655/