jQuery使用AJAX加载Google Visualization API
有一个我无法解决的问题，我一直在互联网上看很多，但一无所获。
我有这个用于通过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: ** // 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)); } }); });
我知道这是一篇较旧的post，但经过一些挖掘google.load文档后，我发现了一个异步选项，以防你想动态加载libs：
http://code.google.com/apis/loader/
function loadMaps() { google.load("visualization", "2", {"callback" : function(){ alert(4); }}); }
我知道这是一个旧线程，但这可能有助于其他人。
我现在遇到了同样的问题，它与我之前使用CMS的情况非常相似（如果不相同）：
页面上的代码：
用ajax加载的脚本的一部分：
结果是一个文本“hello”的页面，看起来仍然正在加载。 这是由document.write方法引起的。 由于脚本被加载到已经完成和关闭的文档中，浏览器会打开一个新文档，我想javascript引擎正在等待下一行代码，这些代码将永远不会到达，因为打开新文档会删除正在执行的文档。
这在黑暗中有点像：
google.setOnLoadCallback(function() { drawData(html) });
可能是对html的引用丢失了，需要关闭。
你能提供一份返回的数据样本吗？ 你可以直接调用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); }});
您是否尝试将此作为同步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)); } });
我对谷歌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/
您似乎错过了提供可视化function的Google库。 你确定你已经包含了所有需要的谷歌脚本吗？
我在我的一个项目中使用了基于AJAX的选项卡系统和Google的交互式线图可视化，并遇到了类似的问题。
由于AJAX固有的跨域脚本阻止，您无法加载Google JavaScript API（ http://www.google.com/jsapi ）或任何其他外部资源。
由于Google的服务条款禁止使用其可视化API离线（也称为“未在Google上托管”），因此您无法合法获取脚本副本并根据需要自行托管。
我尝试了一个hacky解决方法，在我的选项卡中包含一个名为“get_vis.php”的文件而不是“visualization_page.php”; 其中“get_vis.php”的内容是：
但是，没有运气，似乎唯一可以正确加载API的方法是调整安全设置，以便与Google的服务器进行交互。 我不知道它是否有帮助，但祝你好运。
这对我有用
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); } }); } }