2015-11-08 44 views
0

感谢mbelton。我的代码现在运行良好,并且我还修改了我发布的以下代码。Google饼图+ PHP + mySQL

我正在尝试使用Google饼图来执行销售年度。首先我有HTML文件,让用户选择他们希望查看的年份;其次,基于$ year被选中,我将PHP编码连接到mysql以获取相关的销售数据;第三,我创建一个pieData表来存储String Quarter和双重销售数字;然后用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> 
+0

你使用AJAX发送请求,然后使用回调来生成图表,还是完全在页面加载完成? – RamRaider

回答

0

我想在你的代码错误是在打开/关闭<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> 
+0

非常感谢!是的,我从arrayToDataTable中删除了[]标记,并且将单引号修改为双引号,然后显示饼图!这非常美丽,感谢您的帮助。 – nobsoph