试图加载谷歌图表通过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 
     ); 
    });     
});