如何通过PHP实现Google ColumnChart同时展示男女人口数据？

这个报错的原因很直接：你给Google Charts定义的数据表头只声明了2列（地区、男孩数量），但后续每行数据却返回了3个值（地区、男孩、女孩），导致图表库无法解析，抛出列数不匹配的错误。下面是具体的修改步骤：

1. 修正数据表格的表头定义 #

在arrayToDataTable的第一行，需要添加女孩数据的列名，把原来的：

['locality', 'No. of Boys'],

改成：

['locality', 'No. of Boys', 'No. of Girls'],

这样表头就对应了3列数据，和你后续返回的每行数据结构完全匹配。

2. 启用包含女孩数据的PHP输出语句 #

把原来注释掉的输出语句取消注释，替换掉只输出男孩数据的那一行：

// 替换这一行
// echo "['".$row['locality']."',".$row['boys']."],";
// 改成下面这行
echo "['".$row['locality']."',".$row['boys'].", ".$row['girls']."],";

3. 保留（或确认）颜色配置 #

你已经在options里正确设置了两个系列的颜色：男孩（第一个系列，索引0）为红色，女孩（第二个系列，索引1）为蓝色，这部分可以直接保留不变。

修改后的完整代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['locality', 'No. of Boys', 'No. of Girls'],
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'graph');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
$query = mysqli_query($db, "SELECT * FROM population");
while($row = mysqli_fetch_array($query)){
echo "['".$row['locality']."',".$row['boys'].", ".$row['girls']."],";
}
?>
]);
// Optional; add a title and set the width and height of the chart
var options = {'title':'No. of Boys and Girls in a Locality', 'width':800, 'height':400,
series: {
0: { color: 'red' },
1: { color: 'blue' },
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('ColumnChart'));
chart.draw(data, options);
}
</script>
<div id="ColumnChart"></div>

这样修改后，图表就能正常加载并同时展示男孩（红色柱状）和女孩（蓝色柱状）的人口数据了。

内容的提问来源于stack exchange，提问作者Nancy Moore