ajax - 通过Ajax加载Google图表

标签 ajax charts google-visualization

我整理了一个简单的费用跟踪页面,目前正在尝试使用.load()加载Google图表-但是,当我加载页面时,会收到以下错误消息:

google is not defined
function drawChart() {

https://www.google.com/jsapi在我的图表脚本中被调用并且可以单独工作,但是在通过Ajax加载时失败。

这就是我用来称呼图表的东西。
$("#divRight").load("chart.pl?dtfm=" + dtfm + "&dtto=" + dtto);

非常感谢。

-代码-

chart.pl的片段

总计:£19.15
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Description');
data.addColumn('number', 'Cost');
data.addRows([
    ['Groceries', 7.16],
    ['Web / Hosting', 5.99],
    ['Miscellanious', 4.00],
    ['Breakfast', 2.00]

]);
var options = {
    title: ''
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style='height:400px; width:400px; cursor:pointer;'></div>

index.pl的片段
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

<script>
$(document).ready(function() {
$("#divRight").load("chart.pl?dtfm=" + dtfm + "&dtto=" + dtto);

});
</script>

最佳答案

您在加载和回调方法之前是否包含Google JSAPI脚本?

如果没有的话,下面是代码:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

关于ajax - 通过Ajax加载Google图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9684490/

相关文章:

javascript - 如何使用多个字符串数据绘制谷歌折线图

php - Yii2:isAjax 返回 false

javascript - Dygraph 库是否有设置在点之间的差异大于 x 分钟时打破线?

c# - 绘制海量数据图表

javascript - 如何根据 C3.js/D3.js 图表中的阈值更改线条颜色?

javascript - 如何更改Google可视化图表中单元格的颜色

javascript - 在 Google 图表中隐藏图例

php - 通过ajax提交php数组不起作用

javascript - 如何在ajax调用后重新加载img attr "src"而不知道图像标签中的文件名?

php - jQuery (ajax) $.get 方法延迟结果