3

我正在使用谷歌图表（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 并挂在空白页面上。

有谁知道我在这里哪里出错了？

在此先感谢您的帮助

4

3 回答 3

2

为可能遇到相同问题的任何人解决了此问题。在 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>
于 2012-08-29T10:48:25.497 回答
1 
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.

来自谷歌的地理图表

于 2020-04-01T05:16:58.257 回答
0

我遇到了类似的问题，我的绘图功能无法找到它正在寻找的元素。它似乎失败了：

document.getElementById('map-canvas');

我发现原因是google.load("visualization", "1");必须调用document.write，这意味着当我试图抓取元素时 DOM 是完全空的。

我通过将它放入 index.html 来修复它，google.load因此在它到达我的 draw() 函数之前加载了可视化

于 2015-04-27T22:19:41.563 回答