Google 饼图 + PHP + mySQL

Question

感谢 mbelton。我的代码现在运行良好，我还修改了以下代码 post.

我正在尝试使用 Google 饼图来显示销售年份。首先，我有 HTML 文件让用户选择他们希望查看的年份；其次，根据选择的$year，我编码PHP连接到mysql来抓取相关的销售数据；第三，我创建了一个 pieData table 来存储 String Quarter 和 double sales number；然后 JavaScript 得到饼图。我运行代码没有显示任何错误，但我没有看到饼图出现。有人可以告诉我在哪里修改以使其工作吗？谢谢

 $year = $_POST['year'];  
 $mysqli = mysqli_connect("root", "account", "passwd", "testDB")
      or die(mysqli_error());
 $query = "SELECT Q1,Q2,Q3,Q4 from sales where year LIKE '$year'";
 $result = mysqli_query($mysqli, $query) or die(mysqli_error($mysqli));

 /*get the values of each quarter, and store in new table:pieData.
 * if user choose year of 2012, then the new table should look like:
 * Quarter     Number
 * ------------------
 * Q1         127.24
 * Q2         106.54
 * Q3          88.04
 * Q4         120.89
*/
 while ($info = mysqli_fetch_array($result)) {
               $Q1 = $info['Q1'];
               $Q2 = $info['Q2'];
               $Q3 = $info['Q3'];
               $Q4 = $info['Q4'];

            }

 $pieData = array(
                  array('Quarter', 'Number'),
                  array('Q1', (double)$Q1),
                  array('Q2', (double)$Q2),
                  array('Q3', (double)$Q3),
                  array('Q4', (double)$Q4)
    );

 $jsonTable = json_encode($pieData);

 <script type="text/javascript" src="http://www.google.com/jsapi"</script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script type="text/javascript">
        //load package
        google.load("visualization", "1", {packages: ["corechart"]});
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            // Create and populate the data table.
            var data = google.visualization.arrayToDataTable(
                <?php echo $jsonTable; ?>

            );


            var options = {
                title:"Sales Pie"
            };

            // Create and draw the visualization.
            var chart = new google.visualization.PieChart(document.getElementById("piechart"));
            chart.draw(data, options);
        }

    </script>

Answer 1

我认为您的代码中的错误在 opening/closing <script 标记和 .arrayToDataTable 中，您需要删除方括号 [ ]

将代码更改为：

<?php

 $Q1 = 127.24;
 $Q2 = 106.54;
 $Q3 = 88.04;
 $Q4 = 120.89;

 $pieData = array(
              array('Quarter', 'Number'),
              array('Q1', (double)$Q1),
              array('Q2', (double)$Q2),
              array('Q3', (double)$Q3),
              array('Q4', (double)$Q4)
);

 $jsonTable = json_encode($pieData);
?>  

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable(
        <?php  echo $jsonTable; ?>
    );

    var options = {
      title: "My Daily Activities"
    };

    var chart = new google.visualization.PieChart(document.getElementById("piechart"));

    chart.draw(data, options);
  }
</script>
</head>
 <body>
   <div id="piechart" style="width: 900px; height: 500px;"></div>
   </body>
</html>

Google 饼图 + PHP + mySQL

Google Pie Chart + PHP + mySQL

javascript

php

mysql

google-visualization