有一个我无法解决的问题,我一直在互联网上浏览很多东西,但一无所获。
我有这个JavaScript,用于通过PHP进行Ajax请求。请求完成后,它将调用一个函数,该函数使用Google Visualization API绘制带注释的时间轴以呈现数据。
该脚本在没有AJAX的情况下也能很好地工作,如果我内联完成所有工作,那么它会很好,但是当我尝试在AJAX中进行操作时,它就无法工作!!!
我得到的错误是在“数据” DataTable的声明中,在Google Chrome开发者工具中我得到了Uncaught TypeError: Cannot read property 'DataTable' of undefined。
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}); }
我记得当我使用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)); } }); });