jQuery使用AJAX加载Google Visualization API [英] jQuery load Google Visualization API with AJAX

问题描述

有一个我无法解决的问题，我一直在互联网上浏览很多东西，但一无所获.

There is an issue that I cannot solve, I've been looking a lot in the internet but found nothing.

我有这个JavaScript，用于通过PHP进行Ajax请求.请求完成后，它将调用一个函数，该函数使用Google Visualization API绘制带注释的时间轴以呈现数据.

I have this JavaScript that is used to do an Ajax request by PHP. When the request is done, it calls a function that uses the Google Visualization API to draw an annotatedtimeline to present the data.

该脚本在没有AJAX的情况下也能很好地工作，如果我内联完成所有工作，那么它会很好，但是当我尝试在AJAX中进行操作时，它就无法工作！！！

The script works great without AJAX, if I do everything inline it works great, but when I try to do it with AJAX it doesn't work!!!

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

The error that I get is in the declaration of the "data" DataTable, in the Google Chrome Developer Tools I get a Uncaught TypeError: Cannot read property 'DataTable' of undefined.

当脚本出错时，页面上的所有内容均被清除，仅显示空白页面.

When the script gets to the error, everything on the page is cleared, it just shows a blank page.

所以我不知道如何使它工作.

So I don't know how to make it work.

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

推荐答案

我记得当我使用Google API时，它明确表示首先要初始化负载.因此，也许可以将google.load函数保留在AJAX之外，然后在成功时继续调用函数的第二部分:

I remember when I used a Google API it explicitly said to initialize the load first off. So maybe keep the google.load function out of the AJAX, and then just keep calling the second part of your function on success:

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

这篇关于jQuery使用AJAX加载Google Visualization API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！