Google Charts 不绘制图表

问题描述 投票:0回答:1

我正在尝试从 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());
    }
?>

php charts xampp google-visualization
1个回答
0
投票

你的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>
© www.soinside.com 2019 - 2024. All rights reserved.