【发布时间】:2017-04-09 12:03:51
【问题描述】:
我正在尝试使用谷歌图表和一些动态生成的 JSON 来绘制图形和表格。我已经更改了输出以尝试匹配谷歌的要求,但我仍在努力让它发挥作用。我花了无数个小时试图弄清楚这一点,但我终于碰到了一堵砖墙。我已经包含了一个生成的 JSON 的示例。
我在图表应有的位置得到一个空白区域和一个可见的标题表,其中没有数据(但大致正确的行数)。
<!DOCTYPE html>
<head>
<title>Nation stats analyser</title>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['corechart', 'table']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChartAndTable);
function drawChartAndTable() {
var jsonData = $.ajax({
url: "data.php",
dataType: "json",
}).done(function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Value');
Object.keys(jsonData).forEach(function (row) {
data.addRow([
row.Category
row.Value
]);
});
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240});
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
});
}
setTimeout(drawChartAndTable(), 100);
</script>
</head>
<body>
<div id="chart_div"></div>
<div id="table_div"></div>
</body>
[{"Category":"Anarchy","Value":317},
{"Category":"Capitalizt","Value":108},{"Category":"New York Times
Democracy","Value":918},{"Category":"Benevolent
Dictatorship","Value":44},{"Category":"Inoffensive Centrist
Democracy","Value":1993}]
【问题讨论】:
-
浏览器控制台显示的错误是什么?
-
没有显示错误。
-
console.log(data);的输出是什么 -
在
loader.js之前加载jquery.min.js并让我知道状态。 -
感谢接受的答案,它现在可以工作了。感谢您的帮助。
标签: javascript json google-visualization