最初发布在这里: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"> </div></div>
在我的query.php页面的momemnt中,我只是吐出假的JSON数据:
<?php
if(isset($_POST['answer']))
{
echo "{\"yes\": 14,\"no\": 9}";
}
else
{
echo "{\"yes\": 9,\"no\": 14}";
}
?>
点击“是”按钮后,它只显示ajaxloader.gif图像。
我感到非常沮丧,不能为我的生活弄清楚为什么会这样。任何帮助表示赞赏=)
答案 0 :(得分:9)
您的原始代码:
google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package.
再添加一个参数,它应该没问题:
google.load('visualization', '1.0', {'packages':['corechart'], **"callback": drawChart**});
答案 1 :(得分:3)
首先我会检查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
);
答案 2 :(得分:1)
响应似乎与假设为数组的数据类型有关。
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
);
});
});