試圖加載谷歌圖表通過jQuery ajax調用

Question

最初發布這裏：Trying to load Google charts through a (jQuery)ajax call但已修改我的代碼有點，但我仍然無法讓它正常工作。

我正在嘗試編寫一個輪詢函數，用於加載結果並將其顯示在同一頁面中而無需刷新。我正在使用谷歌圖表api和jQuery的Ajax。

主網頁我有這樣的：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
    google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package. 
    google.setOnLoadCallback(function(){ $("#poll_yes").removeAttr('disabled'); }); 

    function drawChart(rows) 
    { 
     // Create the data table. 
     var data = new google.visualization.DataTable(); 
     data.addColumn('string', 'Answers'); 
     data.addColumn('number', 'Number'); 
     data.addRows(rows); 


     // Set chart options 
     var options = 
     { 
      'title'    :'Do you Like my poll?', 
     }; 

     var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
     chart.draw(data, options);    
    }  

    jQuery(document).ready(function() { 
     $.ajaxSetup ({ 
      cache: false 
     }); 
     var ajax_load = "<img src='images/loading.gif' alt='loading...' />"; 

     $("#poll_yes").click(function(){ 
      $("#result").html(ajax_load); 
      $.post(
       "query.php", 
       {answer: "yes", poll_id: 5}, 
       function(response){ 
        drawChart(response); 
       } 
      ); 
     });     
    }); 
</script> 
<input type="submit" value="yes" disabled="disabled" id="poll_yes"/> 
<div id="result"><div id="chart_div">&nbsp;</div></div> 

在我query.php頁的momemnt我只是它吐出假JSON數據：

<?php 

if(isset($_POST['answer'])) 
{ 
    echo "{\"yes\": 14,\"no\": 9}"; 
} 
else 
{ 
    echo "{\"yes\": 9,\"no\": 14}"; 
} 
?> 

我打後，「是」按鈕所有它顯示ajaxloader.gif圖像。

我感覺非常沮喪，不能爲我的生活弄清楚爲什麼會發生這種情況。任何幫助表示讚賞=）

Answer 1

首先，我會檢查的drawChart功能表現正常，接下來嘗試更新您的代碼以這種

$.post(
     "query.php", 
     {answer: "yes", poll_id: 5}, 
     function(response){ 
      console.log(response); // check what the response from the server is 
      drawChart(response); 
     }, 
     'json' // the expected response data type 
); 

Answer 2

您的原始代碼：

google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package. 

增加一個參數，它應該是OK：

google.load('visualization', '1.0', {'packages':['corechart'], **"callback": drawChart**}); 

Answer 3

的反應似乎有些事情要與被假設爲一個數組的數據的類型..

Uncaught Error: Argument given to addRows must be either a number or an array format+en,default,corechart.I.js:152 L.addRows format+en,default,corechart.I.js:152 drawChart

測試數據（test.php的）... { 「是」：9， 「否」：14}

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawChart}); // Load the Visualization API and the piechart package. 
google.setOnLoadCallback(function(){ $("#poll_yes").removeAttr('disabled'); }); 

function drawChart(rows) 
{ 
    // Create the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Answers'); 
    data.addColumn('number', 'Number'); 
    data.addRows(rows); 


    // Set chart options 
    var options = 
    { 
     'title'    :'Do you Like my poll?', 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data, options);    
}  

jQuery(document).ready(function() { 
    $.ajaxSetup ({ 
     cache: false 
    }); 
    var ajax_load = "<img src='images.jpg' alt='loading...' />"; 

    $("#poll_yes").click(function(){ 
     $("#result").html(ajax_load); 
     $.post(
       "test.php", 
       {answer: "yes", poll_id: 5}, 
       function(response){ 
        console.log(response); // check what the response from the server is 
        drawChart(response); 
       }, 
       'json' // the expected response data type 
     ); 
    });     
});