Google.visualization.dashboard未使用json数组php呈现
我正在从MYSQL查询传递一个编码的json数组，以呈现google.visualization.dashboard。我几乎可以肯定问题出在我的阵列上，但我找不到哪里。当我直接绘制图表GoogleCharts（例如google.visualization.PieChart）时，代码可以工作，但当我使用dashboard/control包装器/chart包装器类时，代码不能工作 这让我相信问题要么在于我的数组结构，要么在于google.visualization.dashboard要求数据表的填充方式与图表不同 PHP代码（loadpiechart.PHP）： 这给了我以下数组[]Google.visualization.dashboard未使用json数组php呈现,php,mysql,arrays,json,google-visualization,Php,Mysql,Arrays,Json,Google Visualization,我正在从MYSQL查询传递一个编码的json数组，以呈现google.visualization.dashboard。我几乎可以肯定问题出在我的阵列上，但我找不到哪里。当我直接绘制图表GoogleCharts（例如google.visualization.PieChart）时，代码可以工作，但当我使用dashboard/control包装器/chart包装器类时，代码不能工作 这让我相信问题要么在于我的数组结构，要么在于google.visualization.dashboard要求数据表的填充
{"cols":[{"id":"A","label":"NZ Crime","type":"string"},{"id":"B","label":"Value","type":"number"}],"rows":[{"c":[{"v":" Acts intended to cause injury"},{"v":97}]},{"c":[{"v":" Sexual assault and related offences"},{"v":44515}]},{"c":[{"v":" Dangerous or negligent acts endangering persons"},{"v":3016}]},{"c":[{"v":" Abduction, harassment and other related offences against a person"},{"v":859}]},{"c":[{"v":" Robbery, extortion and related offences"},{"v":14157}]},{"c":[{"v":" Unlawful entry with intent\/burglary, break and enter"},{"v":2641}]},{"c":[{"v":" Theft and related offences"},{"v":59323}]},{"c":[{"v":" Fraud, deception and related offences"},{"v":136932}]},{"c":[{"v":" Illicit drug offences"},{"v":9726}]},{"c":[{"v":" Prohibited and regulated weapons and explosives offences"},{"v":22994}]},{"c":[{"v":" Property damage and environmental pollution"},{"v":7074}]},{"c":[{"v":" Public order offences"},{"v":58483}]},{"c":[{"v":" Offences against justice procedures, government security and government operations"},{"v":46105}]},{"c":[{"v":" Miscellaneous offences"},{"v":19084}]}]}
html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.charts.load('current', {packages:['corechart', 'table', 'controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawTable);
function drawTable() {
var jsonData = $.ajax({
url: "loadpiechart.php",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
});
var chart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'view': {'columns': [0, 1]},
});
var control = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control_div',
'options': {
'filterColumnIndex': 0,
}
});
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
dashboard.bind([control], [table,chart]);
dashboard.draw(data);
}
</script>
</head>
<body>
<div id="dashboard_div" style="border: 1px solid #ccc; margin-top: 1em">
<p style="padding-left: 1em"><strong>NZ Crime Stats</strong></p>
<table class="columns">
<tr>
<td>
<div id="control_div" style="padding-left: 15px"></div>
</td>
</tr><tr>
<td>
<div id="chart_div" style="padding-top: 15px"></div>
</td><td>
<div id="table_div" style="padding-top: 30px"></div>
</td>
</tr>
</table>
</div>
</body>
</html>
html>
//加载可视化API和piechart包。
load（'current'，{packages:['corechart'，'table'，'controls']}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawTable）；
函数drawTable（）{
var jsonData=$.ajax({
url:“loadpiechart.php”，
数据类型：“json”，
异步：false
}).responseText；
//使用从服务器加载的JSON数据创建我们的数据表。
var data=新的google.visualization.DataTable（jsonData）；
var table=new google.visualization.ChartWrapper({
“图表类型”：“表格”，
“集装箱运输”：“表格分区”，
});
var chart=new google.visualization.ChartWrapper({
'chartType'：'PieChart'，
“集装箱船”：“海图分区”，
“视图”：{“列”：[0，1]}，
});
var control=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“集装箱船”：“控制室”，
“选项”：{
“filterColumnIndex”：0，
}
});
var dashboard=new google.visualization.dashboard(
document.getElementById（'dashboard_div'）；
dashboard.bind（[control]、[table、chart]）；
仪表盘.绘图（数据）；
}
新西兰犯罪统计数据
success（）function drawTable() {
$.ajax("https://gist.githubusercontent.com/Moonbird-IT/da4c7d76a69eb250478bb55b5d2360f5/raw/9dbf9d92981a3c9b71906dd3a680a2cdeca7c4aa/googlecharts.json", {
dataType: "json",
success: function(jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
...
}
});
}
我更新了您的代码以使用更改后的建议，这是一个有效的工具。我建议将AJAX调用更改为非阻塞异步调用，并在
success（）function drawTable() {
$.ajax("https://gist.githubusercontent.com/Moonbird-IT/da4c7d76a69eb250478bb55b5d2360f5/raw/9dbf9d92981a3c9b71906dd3a680a2cdeca7c4aa/googlecharts.json", {
dataType: "json",
success: function(jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
...
}
});
}
我更新了您的代码以使用更改后的建议，这是一个有效的工具。我的问题是我没有调用jQuery。我添加了这一行代码，它可以在我的原始代码和这一添加代码的基础上工作
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
这里是google.visaulization文档的链接我的问题是我没有给jQuery打电话。我添加了这一行代码，它可以在我的原始代码和这一添加代码的基础上工作
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
这里链接google.visaulization文档我看到的唯一一个小问题是没有在PHP代码中设置适当的头，我建议添加
头（'Content-Type:application/json'）在回显JSON结果之前。仪表板和图表的数据结构与前面所述的相同：“仪表板接受数据表中的数据，与图表相同。”。下面是代码的一个例子，唯一的变化是使用静态数据而不是AJAX。谢谢。我也能让它与静态数据一起工作。通过添加jQuery，我用我的原始代码找到了一个解决方案。很好，你解决了它。我仍然建议将async:false
更改为success（）
方法，因为同步调用会在请求期间锁定浏览器。它们也被标记为。感谢您的解释，我已经修改了我的代码以包含您的更改。非常感谢。我看到的唯一一个小问题是您没有在PHP代码中设置适当的头，我建议添加header（'Content-Type:application/json'）在回显JSON结果之前。仪表板和图表的数据结构与前面所述的相同：“仪表板接受数据表中的数据，与图表相同。”。下面是代码的一个例子，唯一的变化是使用静态数据而不是AJAX。谢谢。我也能让它与静态数据一起工作。通过添加jQuery，我用我的原始代码找到了一个解决方案。很好，你解决了它。我仍然建议将async:false
更改为success（）
方法，因为同步调用会在请求期间锁定浏览器。它们也被标记为。感谢您的解释，我已经修改了我的代码以包含您的更改。非常感谢。谢谢你的加入。我也用我的原始代码找到了一个解决方案。谢谢你的添加。我也用我的原始代码找到了一个解决方案。