我正在尝试从 xampp 中托管的数据库中获取一些信息,更准确地说,我正在尝试使用谷歌图表绘制图表,其中显示了大学确定课程的学生人数。
但是图表根本没有出现在 div id="chart-one" 中。可能是什么问题?
这是代码:在 php 中:
<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 corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var data = new google.visualization.arrayToDateTable([
['Course', 'Number of Students']
<?php
include 'connection.php';
$sql = "SELECT course, COUNT(course) as 'students' from Students GROUP BY course";
$rs = mysqli_query($con, $sql);
while($data = mysqli_fetch_array($rs)) {
$course = $data['course'];
$students = $dados['students'];
?>
['<?php echo $course?>', <?php echo $students ?>],
<?php } ?>
]);
// Set chart options
var options = {'title':'Number of students per course',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart-one'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart-one"></div>
</body>
</html>
connection.php文件:
<?php
$host = "localhost";
$dbname = "unifesspa";
$username = "root";
$password = "";
$con = mysqli_connect($host, $username, $password, $dbname);
if (!$con) {
die("Connection failed!" . mysqli_connect_error());
}
?>
你的javascript数组输出的输出不对。如果您的数据有引号,它也很容易转义错误。
如果你用 PHP 构建你的整个数据,然后使用 json_encode 将它编码为你想要的二维数组,那么它会更不容易出错。
<?php
include 'connection.php';
$sql = "SELECT course, COUNT(course) as 'students' from Students GROUP BY course";
$rs = mysqli_query($con, $sql);
$chart_data = [
['Course', 'Number of Students'],
];
while($data = mysqli_fetch_array($rs)) {
$chart_data[] = [$data['course'], $data['students']];
}
?>
<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 corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
var data = new google.visualization.arrayToDateTable(<?php echo json_encode($chart_data); ?>);
// Set chart options
var options = {'title':'Number of students per course',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart-one'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart-one"></div>
</body>
</html>