我正在使用谷歌图表(termcloud)来显示一些数据。我可以将其作为页面上的一个静态功能正常工作,但当我试图通过ajax加载图表及其资产时,它似乎一直在抛出一个错误:
'TypeError: google.load is not a function'
这是我的ajax函数:
$("li.contentpanel").click(function() {
$("#content-panel").show();
$('#content-panel').animate({
width: '540'
}, 500, function() {
var dataString = 'alert=1';
$.ajax({
type: "POST",
url: "<?php echo site_url($topicmaplink);?>",
data: dataString,
cache: false,
success: function(html){
$("#content-panel #inner").html(html);
}
});
});
这是一个名为:的页面
(JSAPI和termcloud插件文件加载在此页面顶部)
$(function() {
google.load("visualization", "1");
google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(<?php echo sizeof($topics);?>);
<?php
$trans = array("ã" => "a", "³" => "3", "º" => "0", "â" => "a",
"¡" => ";", "'" => "", "n" => "",'"' => '');
shuffle($topics);
for($j=0;$j<sizeof($topics);$j++){
$nonforeignkeyword = strtr($topics[$j]['keyword'],$trans);
$totalnumber = $topics[$j]['occurrence'];
echo 'data.setValue('.$j.', 0, "'.trim($nonforeignkeyword).'");';
echo 'data.setValue('.$j.', 1, '.$totalnumber.');';
echo 'data.setValue('.$j.', 2, "'.$partlink.'/searchterm||'.trim(rawurlencode($nonforeignkeyword)).'");';
}
?>
var outputDiv = document.getElementById('cp-tmap');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
});
即使我从通过ajax调用的页面中删除JSAPI和termcloud-js文件,并将它们放在被调用的页面上,该页面似乎也会重定向到google.com并挂在空白页面上。
有人知道我哪里错了吗?
提前感谢的帮助
为任何可能有同样问题的人解决了这个问题。在google.load和setOnLoadCallback上删除,并在绘制数据表后将它们放在自己的回调函数中:
<pre>
<code>
//google.load("visualization", "1");
//google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(<?php echo sizeof($topics);?>);
<?php
$trans = array("ã" => "a", "³" => "3", "º" => "0", "â" => "a", "¡" => ";", "'" => "", "n" => "",'"' => '');
shuffle($topics);
for($j=0;$j<sizeof($topics);$j++){
$nonforeignkeyword = strtr($topics[$j]['keyword'],$trans);
$totalnumber = $topics[$j]['occurrence'];
echo 'data.setValue('.$j.', 0, "'.trim($nonforeignkeyword).'");';
echo 'data.setValue('.$j.', 1, '.$totalnumber.');';
echo 'data.setValue('.$j.', 2, "'.$partlink.'/authorname||'.trim(rawurlencode($nonforeignkeyword)).'");';
}
?>
var outputDiv = document.getElementById('cp-tmap');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
$(document).ready(function(){
setTimeout(function(){
google.load("visualization", "1",{"callback" : draw});
}, 100);
});
</code>
</pre>
You need to add this script tag into your index.html
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"> </script>
You can check this from google charts site.
谷歌的地理图
我遇到了一个类似的问题,我的draw函数无法找到它要查找的元素。它似乎在以下方面失败了:
document.getElementById('map-canvas');
我发现原因是google.load("visualization", "1");
必须调用document.write
,这意味着当我试图获取元素时DOM是完全空的。
我通过将google.load
放入index.html来修复它,因此在它到达我的draw()函数