jQuery 使用 AJAX 加载 Google 可视化 API

Question

有一个问题我无法解决，我在网上查了很多，但一无所获。

我有这个 JavaScript，用于通过 PHP 执行 Ajax 请求。请求完成后，它会调用一个函数，该函数使用 Google Visualization API 绘制带注释的时间线来呈现数据。

该脚本在没有 AJAX 的情况下工作得很好，如果我内联执行所有操作，它工作得很好，但是当我尝试使用 AJAX 执行它时，它不起作用！

我得到的错误是在“数据”DataTable 的声明中，在 Google Chrome 开发者工具中，我得到一个未捕获的类型错误：无法读取未定义的属性“DataTable”。

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

所以我不知道如何让它发挥作用。

$(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});                              
}

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)); 
        }
    });  
});

Answer 2

我知道这是一篇较旧的文章，但在深入研究 google.load 文档后，我发现了一个异步选项，以防您想动态加载库：

http://code.google.com/apis/loader/

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

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 引擎正在等待下一行代码，当打开一个新文档删除正在执行的文档时，该代码永远不会到达。

Answer 4

这有点盲目：

google.setOnLoadCallback(function() {
绘制数据(html)
});

可能是html的引用丢失了，需要闭包。

Answer 5

您能否提供返回数据的样本？
您可以直接调用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);                                                   
}}); 

Answer 6

您是否尝试过将其作为同步 AJAX 请求来执行？请注意下面的异步设置。

$.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));                                                   
    }
}); 

Answer 7

我对 google api 一点也不熟悉，但我猜回调中的 '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/

Answer 8

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

Answer 9

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

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

由于 Google 的服务条款禁止离线（也称为“不在 Google 上托管”）使用其可视化 API，因此您无法合法获取脚本的副本并根据需要自行托管它们。

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

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

但是，不幸的是，似乎让 API 正确加载的唯一方法是调整安全设置，以便允许与 Google 服务器交互。我不知道这是否有帮助，但祝你好运。

Answer 10

这对我有用

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);


                }
            });    
        }
}