Google Charts图表无法绘制问题排查求助

尝试从XAMPP托管的数据库获取数据，用Google Charts绘制大学各课程学生数量统计饼图，但图表未在id为chart-one的div中显示。

相关代码 #

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());
    }
?>

问题排查与修复 #

1. PHP变量名拼写错误 #

循环中把数据库查询结果赋值给了$data，但获取学生数量时错误使用了未定义的$dados['students']，应该改为$data['students']。

修复后循环代码：

while($data =  mysqli_fetch_array($rs)) {
    $course = $data['course'];
    $students = $data['students']; // 修正变量名
    ?>

    ['<?php echo $course?>', <?php echo $students ?>],
    
<?php } ?>

2. Google Charts方法名错误 #

调用了错误的方法arrayToDateTable，正确方法名为arrayToDataTable（注意是Data而非Date），拼写错误会导致无法创建数据表格。

修复后JavaScript代码：

var data = new google.visualization.arrayToDataTable([ // 修正方法名
    ['Course', 'Number of Students']
    // 后续PHP循环代码
]);

3. 数组语法错误（可选优化） #

循环生成的每行数据末尾都带逗号，会导致JavaScript数组语法错误。建议用PHP数组收集数据后，通过json_encode输出，自动处理逗号分隔：

优化后PHP循环部分：

<?php
include 'connection.php';

$sql = "SELECT course, COUNT(course) as 'students' from Students GROUP BY course";
$rs = mysqli_query($con, $sql);

$chartData = [];
while($row = mysqli_fetch_array($rs)) {
    $chartData[] = [$row['course'], (int)$row['students']];
}
?>

var data = new google.visualization.arrayToDataTable([
    ['Course', 'Number of Students'],
    <?php echo json_encode($chartData, JSON_UNESCAPED_UNICODE); ?>
]);

4. 调试建议 #

• 打开浏览器开发者工具（F12），查看控制台的JavaScript错误信息，快速定位问题。
• 查看页面渲染后的HTML源码，确认PHP输出的数组内容是否符合预期，比如是否存在undefined值或语法错误。

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