Google 图表未通过 PHP 显示女孩人数

Question

我正在尝试建立一个 Google ColumnChart 来显示每个地区男孩和女孩的人口。

男生柱状图为红色，女生柱状图为蓝色。我创建了 MySQL 数据库并插入了如下内容：

CREATE TABLE `population` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `locality` varchar(20) NOT NULL,
  `boys` int(11) NOT NULL,
  `girls` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=latin1;


INSERT INTO `population` VALUES ('1', 'locality1', '10','30');
INSERT INTO `population` VALUES ('2', 'locality2', '24','26');
INSERT INTO `population` VALUES ('3', 'locality3', '29','17');

这是我的问题： 当我运行下面的代码时。仅显示男生柱状图

如果我尝试添加数据库行以显示女孩的行以及按照这行代码

echo "['".$row['locality']."',".$row['boys'].", ".$row['girls']."],";

下面会报错

Uncaught (in promise) Error: Row 1 has 3 columns, but must have 2

下面是一个显示男孩柱形图的工作代码。我如何也显示女孩的柱形图？

<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'],
<?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']."],";

//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>

Answer 1

数组中的第一项必须定义列：

var data = google.visualization.arrayToDataTable([
  ['locality', 'No. of Boys', 'No. of Girls'],
  ...

那么 API 应该能够处理这个输出：

echo "['".$row['locality']."',".$row['boys'].", ".$row['girls']."],";

参见https://developers.google.com/chart/interactive/docs/gallery/columnchart ...

这样的图表也可以用不同的方式构造：https://jsfiddle.net/api/post/library/pure

Google 图表未通过 PHP 显示女孩人数

Google chart not showing population of Girls via PHP

php

charts

google-visualization