尝试通过jQuery ajax调用加载Google图表
Trying to load Google charts through a jQuery ajax call
最初张贴在这里:试图通过(jQuery)ajax调用加载谷歌图表,但修改了我的代码一点,但我仍然不能让它正常工作。
我正试图编写一个民意调查函数,加载结果并在同一页面中显示它而不刷新。我使用谷歌图表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页面中,我只是让它吐出虚假的JSON数据:
<?php
if(isset($_POST['answer']))
{
echo "{'"yes'": 14,'"no'": 9}";
}
else
{
echo "{'"yes'": 9,'"no'": 14}";
}
?>
当我点击"是"按钮后,它所做的就是显示ajaxloader.gif图像。
我感到非常沮丧,我一辈子也弄不明白为什么会发生这种情况。如有任何帮助,不胜感激=)
您的原始代码:
google.load('visualization', '1.0', {'packages':['corechart']}); // Load the Visualization API and the piechart package.
再添加一个参数,应该就可以了:
google.load('visualization', '1.0', {'packages':['corechart'], **"callback": drawChart**});
首先我会检查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
);
响应似乎与假定为数组的数据类型有关。
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 Data (Test .php){"yes": 9,"no": 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
);
});
});
相关文章:
- 使用同步ajax调用加载屏幕
- 调用加载的顺序函数会意外中断代码
- Requirejs:dist 失败,加载器插件没有在构建:文本中调用加载回调
- 使用 ajax 调用加载 php 文件并执行按钮单击事件
- jQuery函数在页面上调用加载和点击
- IMG 未使用 AJAX 调用加载图像
- 如何在 ag-grid 中从 http 调用加载动态列和行(列和记录都应该是动态的)
- 由 ajax 调用加载的页面文本框上的 Jquery 按键事件
- 在 ajax 调用加载的页面上隐藏多个
- 使用 Ajax 调用加载选项卡内容
- 调用/加载 Jquery 页面
- Ajax调用加载当前内容
- 如何在AngularJS Bootstrap模式中从AJAX调用加载JSON数据
- AngularJS-使用REST API调用加载图像
- 在angular js中通过ajax调用加载模板url
- 我正在做一个ajax调用加载内容到模态对话框;它似乎在所有其他浏览器上工作,而不是IE
- 尝试通过(jQuery)ajax调用加载Google图表
- 尝试通过jQuery ajax调用加载Google图表
- 从Javascript调用加载dll时出现java安全错误,但直接从applet调用时没有
- 通过Ajax调用加载元素后,单击事件不工作