jQuery使用AJAX加载Google Visualization API

Question

有一个我无法解决的问题,我一直在互联网上看很多,但一无所获.

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

这个脚本在没有AJAX的情况下工作得很好,如果我做内联的一切都很好,但是当我尝试用AJAX做它时它不起作用!

我得到的错误是在"数据"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});                              
}

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文档后,我发现了一个异步选项,以防你想动态加载libs:

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

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