【发布时间】：2020-09-28 07:38:04
【问题描述】：
我从一个 MYSQL 查询中传递一个编码的 json 数组来渲染一个 google.visualization.dashboard。我几乎可以肯定问题出在我的阵列上，但我找不到在哪里。当我直接绘制图表谷歌图表（例如google.visualization.PieChart）时，该代码有效，但在我使用仪表板/控件包装器/图表包装器类时无效。
这让我相信问题出在我的数组结构上，或者 google.visualization.dashboard 要求数据表的填充方式与图表不同。
PHP 代码（loadpiechart.php）：
$table['cols'] = array(
array('label' => 'NZ Crime', 'type' => 'string'),
array('label' => 'Value', 'type' => 'number'),
);
$rows=array();
while($r=mysqli_fetch_assoc($res)){
$temp=array();
$temp[]=array('v'=> $r['Offence']);
$temp[]=array('v' => $r['Total']);
$rows[]=array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table, JSON_NUMERIC_CHECK);
echo $jsonTable;
这给了我以下数组[]
{"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 代码。
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>
【问题讨论】：
-
我看到的唯一小问题是您没有在 PHP 代码中设置适当的标头，我建议在回显 JSON 结果之前添加
header('Content-Type: application/json');。仪表板和图表的数据结构与in the docs 所述相同：“仪表板接受数据表中的数据，与图表相同。”。这是带有您的代码的working fiddle，唯一的变化是使用静态数据而不是 AJAX。 -
谢谢。我也能够让它与静态数据一起工作。我通过添加 jQuery 找到了使用原始代码的解决方案。
-
很好，你解决了。我仍然建议从
async:false更改为success()方法，因为同步调用会在请求期间锁定浏览器。它们也被标记为deprecated and may issue a warning in the Console。 -
感谢您的解释，我已经修改了我的代码以包含您的更改。非常感谢。
标签： php mysql arrays json google-visualization