使用AJAX加载Google Visualization API的jQuery

Question

我有一个问题解决不了，已经在网上找了很多资料但是没找到。

我有一个 JavaScript 用于通过 PHP 发出 Ajax 请求。当请求结束后，它会调用一个使用 Google 可视化 API 绘制带注释时间轴的函数来呈现数据。

如果没有 AJAX ，脚本可以正常工作，如果一切都内联完成，脚本也能正常工作，但当我尝试使用 AJAX 时，它就无法工作！！！

我收到的错误是在 "data" DataTable 的声明中，在 Google Chrome 开发者工具中，我得到了 Uncaught TypeError: Cannot read property 'DataTable' of undefined。

当脚本到达错误时，页面上的所有内容都被清除，只显示一个空白页。

所以我不知道怎么让它工作。

$(document).ready(function(){               
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data      
            google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
            google.setOnLoadCallback(drawData(html));                                                   
        }
    });     
});


function drawData(response){            
    $("#divTendency").removeClass("loading");

    // Data comes from PHP like: <CSV ticket count for each day>*<CSV dates for ticket counts>*<total number of days counted>
    // So it has to be split first by * then by ,
    var dataArray   = response.split("*");
    var dataTickets = dataArray[0];
    var dataDates   = dataArray[1];
    var dataCount   = dataArray[2];

    // The comma separation now splits the ticket counts and the dates
    var dataTicketArray = dataTickets.split(",");
    var dataDatesArray  = dataDates.split(",");

    // Visualization data                               
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Tickets');
    data.addRows(dataCount);                                                    

    var dateSplit = new Array();
    for(var i = 0 ; i < dataCount ; i++){
        // Separating the data because must be entered as "new Date(YYYY,M,D)"
        dateSplit = dataDatesArray[i].split("-");
        data.setValue(i, 0, new Date(dateSplit[2],dateSplit[1],dateSplit[0]));
        data.setValue(i, 1, parseInt(dataTicketArray[i]));
    }               

     var annotatedtimeline = new google.visualization.AnnotatedTimeLine(document.getElementById('divTendency'));
     annotatedtimeline.draw(data, {displayAnnotations: true});                              
}

- Arturo

Answer 1

我记得当我使用Google API时，它明确地要求首先初始化负载。因此，也许保持 google.load 函数不在 AJAX 中，然后只需在成功时调用你函数的第二部分：

//Straight Away!
google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 

$(document).ready(function(){
    // Get TIER1Tickets                 
    $("#divTendency").addClass("loading");

    $.ajax({
        type: "POST",
        url: "getTIER1Tickets.php",
        data: "",
        success: function(html){
            // Succesful, load visualization API and send data
            google.setOnLoadCallback(drawData(html)); 
        }
    });  
});

- jamie-wilson

---

实际上这是有道理的，因为您的google方法可能无法从ajax请求之外访问。您的错误消息告诉您google.visualisation不存在。 - jamie-wilson

嘿，这个起作用了！谢谢你，我以为我之前试过了，看来我做错了什么。谢谢！ - Arturo

Answer 2

我知道这是一篇较旧的帖子，但在浏览谷歌加载器文档时，我发现了一个异步选项，以便您可以动态加载库： http://code.google.com/apis/loader/

function loadMaps() {
   google.load("visualization", "2", {"callback" : function(){ alert(4); }});
}

- daxiang28

Answer 3

我知道这是一个旧的帖子，但这可能会帮助其他人。
我现在遇到了同样的问题，这与我之前在CMS上遇到的问题非常相似（如果不是完全一样）：

页面上的代码：

<div id='targetdiv'></div>
<script type="text/javascript">
$(document).ready( function () {
   $('#targetdiv').load('...some url...');
});
</script>

通过ajax加载的部分脚本：

<script type="text/javascript">
  document.write("hello");
</script>

结果是一个带有文本“hello”的页面，看起来仍在加载中。这是由于document.write方法引起的。由于脚本已经加载到一个已经完成并关闭的文档中，浏览器会打开一个新的文档，我想javascript引擎正在等待下一行代码，但新打开的文档删除了正在执行的文档，所以下一行代码永远不会到达。

- balazs

Answer 4

你能提供一份返回数据的样本吗？你可以直接调用 drawData(html)：

$.ajax({
type: "POST",
async: false,
url: "getTIER1Tickets.php",
data: "",
success: function(html){
    // Succesful, load visualization API and send data      
    google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
   //You are already in a callback function, better like this ? 
    drawData(html);                                                   
}}); 

- Darkyo

Answer 5

这可能是个冒险的尝试： < p > < code > google.setOnLoadCallback(function() { drawData(html) });

可能是因为对 HTML 的引用丢失了，需要一个闭包。

- Finbarr

Answer 6

你尝试过将其作为同步 AJAX 请求吗？请注意下面的async设置。

$.ajax({
    type: "POST",
    async: false,
    url: "getTIER1Tickets.php",
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
}); 

- James

Answer 7

我对Google APIs一点也不熟悉，但我猜回调中的“html”实际上是JSON或脚本，您可以尝试使用$.ajax的“dataType”选项：

$.ajax({
    type: "POST",
    url: "getTIER1Tickets.php",
    dataType: "json",//"script"
    data: "",
    success: function(html){
        // Succesful, load visualization API and send data      
        google.load('visualization', '1', {'packages': ['annotatedtimeline']}); 
        google.setOnLoadCallback(drawData(html));                                                   
    }
});

更多信息：http://api.jquery.com/jQuery.ajax/

- dimvic

---

我认为这不是问题，因为我确实从AJAX请求中获取了信息。如果在成功函数中执行“alert（html）”，我可以看到所请求的信息。问题似乎是Google API在该调用上没有加载。谢谢！ - Arturo

Answer 8

我在我的一个项目中使用了基于AJAX的选项卡系统和Google的交互式折线图可视化，并遇到了类似的难题。

由于AJAX固有的跨域脚本阻塞，您无法加载Google javascript API（http://www.google.com/jsapi）或任何其他外部资源。

而且，由于Google的服务条款禁止离线（即“不托管在Google上”）使用其可视化API，因此您不能合法地获取脚本的副本并像所需的那样自行托管它们。

我尝试了一个hacky解决方法，将名为“get_vis.php”的文件包含在我的选项卡中，而不是“visualization_page.php”，其中“get_vis.php”的内容如下：

<?php 
echo file_get_contents('http://domain.com/path/to/visualization_page.php');
?>

不过，很遗憾，看起来让API成功加载的唯一方法是调整安全设置以允许与Google服务器交互。我不知道这是否有帮助，但祝你好运。

- dan

Answer 9

这对我有效

google.load("visualization", "1", { packages: ["corechart"] });

             var chart ;
             var data ;
             var options;
        function Change(s)
        {
              // s in json format    
              google.setOnLoadCallback(reDraw(s));
              function reDraw(s) {
                  console.log(new Function("return " + s)().length); // to test if json is right
                  data = google.visualization.arrayToDataTable(new Function("return "+s)());

                    options = {
                    title: 'Product Scanes',
                    vAxis: { title: '', titleTextStyle: { color: 'red'} }         
                };

              }         
                chart = new google.visualization.BarChart(document.getElementById('chart_div'));
                chart.draw(data, options);
        }  
        function requestDate() // cal the method when you want to draw the chart 
        {

            $.ajax({
                type: "POST", // CHANGED
               // contentType: "application/json; charset=utf-8",
                url: "something.php",
                data: {  parameters you wanna pass },
                success: function (d) { 
                Change(d);


                }
            });    
        }
}

- user123456

Answer 10

看起来你缺少了提供可视化的Google库。你确定已经包含了所有需要的Google脚本吗？

- acrosman

---

我在我的PHP文件头部有这两行代码：<script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="lib/jquery.js"></script> 我认为这不是问题，因为如果我不使用AJAX它可以正常工作。 - Arturo

你尝试过将可视化负载（"google.load('visualization',..."）移动到 Ajax 调用之前吗？ - acrosman