我正在尝试使用 PHP 和 MySql 渲染 google 图表,但没有渲染图表,也没有显示错误消息。 html 代码是否正确?

I am trying to render google chart using PHP and MySql but no chart is rendered and no error message is displayed. Is the html code correct?

<?php

$host = "localhost";
$username = "root";
$password = "root";
$db = "ujval";

$conn = new mysqli($host, $username, $password, $db);

if($conn->connect_error) {
die ("Connection failed:". $conn->connect_error);
} else {
echo "Awesome";
}

到目前为止一切正常

$sql = "SELECT * FROM sub_list";
$qresult = $conn->query($sql);
$results = array();
while($res = $qresult->fetch_assoc()) {
$results[] = $res;
}

$bar_chart_data = array();

foreach($results as $result) 
{
$bar_chart_data[] = array($result['sub_id'], $result['sub_name']);
}

$bar_chart_data = json_encode($bar_chart_data);
$mysqli_free_result($qresult);
$mysqli_close($conn);
?>

我认为主要问题在于上面的部分。我得到的错误是:

Slim 应用程序错误 由于以下错误,应用程序无法 运行:

详情

类型:错误异常 代码:8 消息:未定义的变量:mysqli_free_result 文件:/Applications/MAMP/htdocs/Dream/Dream/templates/charts.php 行:31

<html>

  <head>
<!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

<!--Load the Visualization API and the piechart package.-->
    google.load("visualization", "1.0", {packages:["bar"]});

<!--Set a callback to run when the Google Visualization API is loaded.-->
    google.setOnLoadCallback(drawChart);


<!--Callback that creates and populates a data table,-->
<!--instantiates the pie chart, passes in the data and-->
<!--draws it.-->
    function drawChart() {
<!--Create the data table.-->
    var data = google.visualization.DataTable();
    data.addColumn('string', 'Age Group');
    data.addColumn('number', 'Number');
    data.addRows($bar_chart_data);

<!--Set chart options-->
    var options = {
      title: ' ' 
    };

<!--Instantiate and draw our chart, passing in some options.-->
    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, options);

    }

   </script>

</head>
<body>

[enter image description here][1]<!--Div that will hold the pie chart-->

    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>][1]

</body>

</html>

这是浏览器生成的 HTML 代码。

Awesome
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1.0", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('number', 'sub_id');
      data.addColumn('string', 'sub_name');
      data.addRows({$bar_chart_data});
      var options = {
        title: ' '
      };
      var chart = new google.charts.Bar(document.getElementById('columnchart_material')); 
      chart.draw(data, options);
    }

  </script>
  </head>
  <body>
    <div id="columnchart_material" style="width: 900px; height: 500px;"></div>
  </body>
</html>

并且浏览器中的错误显示: "Uncaught ReferenceError: bar_chart_data is not defined"

将最后两行改为

mysqli_free_result($qresult);
mysqli_close($conn);

那么您应该不会再收到该错误消息了。

编辑:

并且,此行未正确解析:

data.addRows($bar_chart_data);

无法在 JavaScript 中引用 PHP 变量。但它应该像这样工作得更好:

data.addRows(<? echo $bar_chart_data ?>);

那么您的 JSON 代码应该正确插入。