Google Charts API 使用 $(document).ready 方法显示空白屏幕
我有几个函数可以使用 Google Charts API 实例化各种图表。
当我在没有 jQuery 的 $(document).ready
方法的情况下调用它们时,一切正常。但用这种方法,我看到的是空白屏幕。
为什么?
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
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
I've got several functions that instantiate various charts using Google Charts API.
When I call them without jQuery's $(document).ready
method, everything works fine. But with that method, I'm looking at blank screen.
Why?
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src = "http://www.google.com/jsapi" charset="utf-8"></script>
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);
});
UPDATE
Here is the error I get in 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
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(9)
google.setOnLoadCallback 与 jQuery $(document)。 read(), is it OK to mix?
可能是最接近的答案,Ryan Wheale 对以下内容的回答也可能有帮助。
可以多次使用 google.setOnLoadCallback 吗?
google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?
is probably the closest answer, and Ryan Wheale's answer on the following may also be helpful.
Is it ok to use google.setOnLoadCallback multiple times?
根据 google 可视化文档,您需要在 onload 或 jquery 准备就绪之前加载可视化包。我建议在 jsapi 脚本引用之后立即加载,如下所示。
否则你会得到一个 1) google is not Define (参考错误) 或 2) 如果使用 ajax 可能会得到一个空白响应 &空白页,没有错误。
加载顺序:(使用您的示例)
According to the google visualization documentation you need to load the visual package(s) prior to onload or jquery ready. I would suggest loading immediately after the jsapi script reference as shown below.
Otherwise you will get a 1) google is not defined (reference error) or 2) if using ajax possibly a blank response & blank page with no errors.
load sequence: (using your example)
这是我正在使用的范例。为 google.load 方法设置回调,并且根本不使用 google.setOnLoadCallback (据我所知这是不需要的)。
Here is the paradigm I am using. Set a callback for the google.load method, and don't use the google.setOnLoadCallback at all (AFAIK this is not needed).
嗨,这个解决方案对我不起作用,显然(我猜我不确定)当你在 jquery 对象中调用它时,谷歌库有一些范围问题,所以解决方案非常简单(尽管它不是)这么简单:s)定义一个全局变量并分配google库:
看起来很有趣呵呵:)...然后使用你定义的变量来调用setOnCallback,它对我有用,我希望它对你有用..
Hi that solution doesn't worked for me, apparently (i'm guessing i'm not sure) google library has some scope issues when you call it inside a jquery object, so the solution is quite simple (although got it wasn't so simple :s) define a global variable and assign the google librari:
looks funny huh :)... then use the variable you defined to invoque the setOnCallback, it worked for me i hope it work for you..
对于替代解决方案,您可以使用“自动加载”将所需的包包含在脚本标记中。这不需要“google.setOnLoadCallback”。
有关详细信息,请参阅 https://developers.google.com/loader/#AutoLoading。
因此,您可以像平常一样从 jquery 文档就绪事件中执行所有操作。
还有一个向导可以为您设置 URL,但目前该链接已损坏。无论如何,它就是:http://code.google.com/apis/loader/ autoloader-wizard.html
For an alternate solution you can use 'autoloading' to include the packages you want in the script tag. This negates the need for "google.setOnLoadCallback".
see https://developers.google.com/loader/#AutoLoading for details.
So, you can do everything as you would normally from as jquery document ready event.
There is also a wizard that can set up a URL for you, but currently the link is broken. Here it is anyway: http://code.google.com/apis/loader/autoloader-wizard.html
你必须打电话
https://www.google.com/jsapi
而不是
http://www.google.com/jsapi
祝你好运
you hav to call
https://www.google.com/jsapi
instead of
http://www.google.com/jsapi
good luck
这对我有用:
演示: jsfiddle
This works for me:
Demo: jsfiddle
尝试关闭对
ready
的调用?Try to close the call to
ready
?