我想繪製使用谷歌圖表和一些動態生成的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)的輸出是什麼;' –