Google Charts API使用$（document）.ready方法显示空白屏幕
我有几个使用Google Charts API实例化各种图表的函数。
当我在没有jQuery的$(document).ready方法的情况下调用它们时，一切正常。 但是用这种方法，我看着空白屏幕。
为什么？
function drawColumnChart1(){..some code..} function drawColumnChart2(){..some code..} function drawGeoChart(){.some code..} //This works fine. google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]}); google.setOnLoadCallback(window.drawColumnChart1); google.setOnLoadCallback(window.drawColumnChart2); google.setOnLoadCallback(window.drawGeoChart); //This doesn't work $(document).ready(function(){ google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]}); google.setOnLoadCallback(window.drawColumnChart1); google.setOnLoadCallback(window.drawColumnChart2); google.setOnLoadCallback(window.drawGeoChart); });
更新以下是我在Firebug中遇到的错误：
uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://www.google.com/jsapi :: Q :: line 20" data: no] http://www.google.com/jsapi Line 22
使用jQuery $（document）.ready（）的google.setOnLoadCallback，可以混合使用吗？
可能是最接近的答案，Ryan Wheale对以下内容的回答也可能有所帮助。
可以多次使用google.setOnLoadCallback吗？
根据google可视化文档，您需要在 onload或jquery ready 之前加载可视化包。 我建议在jsapi脚本引用后立即加载，如下所示。
否则你将获得1）google未定义（引用错误）或2）如果使用ajax可能是空白响应和空白页面没有错误。
加载顺序:(使用你的例子）
$(document).ready(function(){ google.setOnLoadCallback(window.drawColumnChart1); google.setOnLoadCallback(window.drawColumnChart2); google.setOnLoadCallback(window.drawGeoChart); });
这是我正在使用的范例。 设置google.load方法的回调，并且根本不使用google.setOnLoadCallback（不需要AFAIK）。
MyChart.prototype.render = function() { var self = this; google.load("visualization", "1", { callback: function() { self.visualize(); }, packages: ["corechart"] } ); } MyChart.prototype.visualize = function() { var data = google.visualization.arrayToDataTable( [ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance', hAxis: {title: 'Year', titleTextStyle: {color: 'red'}} }; var chart = new google.visualization.ColumnChart(document.getElementById("mychart_div")); chart.draw(data, options); }
嗨，这个解决方案对我不起作用，显然（我猜我不确定）当你在jquery对象中调用它时谷歌库有一些范围问题，所以解决方案很简单（虽然它不是这么简单：s）定义一个全局变量并分配谷歌图书馆：
var localGoogle = google;
看起来很滑稽吧:)）然后使用你定义的变量来调用setOnCallback，它对我有用，我希望它对你有用..
$(document).ready(function(){ localGoogle.setOnLoadCallback(window.drawColumnChart1); }
对于备用解决方案，您可以使用“自动加载”在脚本标记中包含所需的包。 这消除了对“google.setOnLoadCallback”的需求。
有关详细信息，请参阅https://developers.google.com/loader/#AutoLoading 。
因此，您可以像通常的jquery文档就绪事件一样执行所有操作。
还有一个向导可以为您设置URL，但目前链接已损坏。 无论如何它在这里： http ： //code.google.com/apis/loader/autoloader-wizard.html
您可以拨打https://www.google.com/jsapi而不是http://www.google.com/jsapi
祝好运
这对我有用：
google.load("visualization", "1", {packages:["corechart"], callback:function(){drawChart();}}); //google.setOnLoadCallback(drawChart); function drawChart() { console.log("enter draw"); var data = google.visualization.arrayToDataTable([ ['Year', 'value', { role: 'style' } ], ['2010', 10, ' color: gray'], ['2010', 200, 'color: #76A7FA'], ['2020', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]); var view = new google.visualization.DataView(data); var options = { title: 'Company Performance', tooltip: {isHtml: false}, legend: 'none', }; var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); chart.draw(view, options); }
演示： jsfiddle
尝试关闭电话ready ？
$(document).ready(function(){ ... }); ^^^