Question

我正在尝试使用ajax和php创建一个谷歌饼图。但它不适合我。请有人帮帮我。代码如下。我的第一页是piechart.php

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
     <script>
     function get_piechart()
      {
       $("#std").load("get_piechart.php");
      }
     </script>

     <input type="button" value="piechart" onClick="get_piechart();"/>
     <div id="std">
     </div>

我的ajax页面是get_piechart.php

      <div id="chart_div" style="width: 900px; height: 500px;"></div>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">

      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(load_chart_data);

      function load_chart_data() {
      $.ajax({
      url: 'getData1.php', // provide correct url
      type: 'POST',
      data: {get_chart: true},
      dataType: 'JSON', // <-- since youre expecting JSON
      success: function(chart_values) {
        console.log(chart_values); // take a peek on the values (browser console)
        draw_chart(chart_values); // call your drawing function!
      }
     }); 
     }

    function draw_chart(chart_values) {
    var data = google.visualization.arrayToDataTable(chart_values);
    var options = {
    title: 'Your super chart!',
    vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}},
    hAxis: {title: 'Task', titleTextStyle: {italic: false}},
    };
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }

   </script>

数据文件是getData1.php

   <?php
   if(isset($_POST['get_chart'])) {
       $values = array(
       array('Task', 'Hours Per Day'),
       array('Booking', 11),
       array('Pending', 89),
    );

   echo json_encode($values);
   exit;
   }
   ?>

点击饼图按钮后，我收到错误未捕获的ReferenceError：未定义谷歌。请帮我解决这个问题

谷歌饼图与ajax和PHP无法正常工作

0 个答案: