时间戳

首页 > 解决方案 > 谷歌图表未通过 PHP 显示女孩人口

php - 谷歌图表未通过 PHP 显示女孩人口

问题描述

我正在尝试建立一个 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>

标签： phpchartsgoogle-visualization

解决方案

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

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

推荐阅读