有一个问题,我不能解决,我一直在网上很多,但什么也找不到。
我有这个JavaScript,用于做一个Ajax请求由PHP。请求完成后,它会调用一个函数,该函数使用Google Visualization API来绘制带注释的时间线来显示数据。
脚本工作伟大没有AJAX,如果我做一切内联它工作伟大,但是当我尝试使用AJAX它不工作!
我得到的错误是在“数据”DataTable的声明,在Google Chrome开发工具中我得到一个未捕获的TypeError:无法读取属性’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,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',{'packages': ['annotatedtimeline']});
$(document).ready(function(){
// Get TIER1Tickets
$("#divTendency").addClass("loading");
$.ajax({
type: "POST",load visualization API and send data
google.setonLoadCallback(drawData(html));
}
});
});