Question

通过几篇文章阅读，我已经了解了创建谷歌图表的基本想法，但我仍然不清楚它是如何从数据库中的表格中提取的数据创建的。一些json解析对象已完成，但不清楚。我写了一些代码。请提前向我提出一些指示。

// chartDraw.php

<html>
<head>
<!--Load the AJAX API -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>">
<script type="text/javascript">
//Load the visualization API and the piechart package
google.load('visualization','1',{'packages':['corechart']});
//Set a callback to run when the google visualization API is loaded
google.setOnLoadCallback(drawchart);
function drawChart(){
  var jsonData = $.ajax({
        url:"getdata.php",
        dataType:"json",
        async:false
        }).responseText;
//Create our data table out of JSON data loaded from server
var data=new google.visualization.DataTable(jsonData);
//Instantiate and draw our chart, passing in some options
var chart=new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data,{width:400,height:240});
}
</script>
</head>
<body>
        <!--Div that will hold the pie chart -->
        <div id="chart_div"></div>
</body>
</html>

//在url属性中指定了getdata.php

<?php

mysql_connect('localhost','uname','123456');
mysql_select_db('rcusers');

$sqlquery1="select userid,group_name,req_nodes,actualPE from jobs where userid='zhang' limit 200";

$sqlresult1=mysql_query($sqlquery1);
while($row=mysql_fetch_assoc($sqlresult1)){
        $userDetails[]=$row;

}

?>

接下来的内容以及我应该如何将数据发送到json对象以及在哪里？我很困惑..

Answer 1

这个简单的例子可能会帮助你

<html>
     <head>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      <script type="text/javascript">
        $(document).ready( function() {
        $('#test').click(function() {
          $.ajax({
          type: 'POST',
          url: 'fetch_data.php',
          dataType: 'json',
          cache: false,
          success: function(result) {
               var data = google.visualization.arrayToDataTable([
                  ['T', result[0]],
                  ['W', result[1]],
                  ['E', result[2]]

                ]);

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

        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
        },
        });
       });
      });
       </script>
      </head>
     <body>
       <div id="chart_div" style="width: 900px; height: 500px;"></div>
        <a href="#" id="test">click</a>
     </body>
    </html>

fecth_data.php

<?php
$array = array(1,2,3,4);
echo json_encode($array);
?>

无法从mysql数据库创建谷歌饼图

1 个答案: