jQuery Google Charts API 使用 $(document).ready 方法显示空白屏幕
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5197547/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Charts API shows blank screen with $(document).ready method
提问by Stann
I've got several functions that instantiate various charts using Google Charts API.
我有几个函数可以使用 Google Charts API 实例化各种图表。
When I call them without jQuery's $(document).readymethod, everything works fine. But with that method, I'm looking at blank screen.
当我在没有 jQuery$(document).ready方法的情况下调用它们时，一切正常。但是使用这种方法，我正在查看空白屏幕。
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);
});
UPDATEHere is the error I get in Firebug:
更新这是我在 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
采纳答案by digitaljoel
google.setOnLoadCallback with jQuery $(document).ready(), is it OK to mix?
google.setOnLoadCallback 和 jQuery $(document).ready()，可以混用吗？
is probably the closest answer, and Ryan Wheale's answer on the following may also be helpful.
可能是最接近的答案，Ryan Wheale 对以下内容的回答也可能有所帮助。
回答by tibc-dev
According to the google visualization documentation you need to load the visual package(s) priorto onload or jquery ready. I would suggest loading immediately after the jsapi script reference as shown below.
根据 google 可视化文档，您需要在onload 或 jquery 准备好之前加载可视化包。我建议在 jsapi 脚本参考之后立即加载，如下所示。
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.
否则你会得到一个 1) google is not defined (reference error) 或 2) 如果使用 ajax 可能是一个没有错误的空白响应和空白页面。
load sequence:(using your example)
加载顺序：（使用您的示例）
<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>
<script type="text/javascript">
google.load("visualization", "1", {packages:["piechart", "corechart", "geomap"]});
</script>
$(document).ready(function(){
google.setOnLoadCallback(window.drawColumnChart1);
google.setOnLoadCallback(window.drawColumnChart2);
google.setOnLoadCallback(window.drawGeoChart);
});
回答by Paul
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).
这是我正在使用的范例。为 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);
}
回答by Ricardo
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:
嗨，这个解决方案对我不起作用，显然（我猜我不确定）当你在 jquery 对象中调用它时，google 库有一些范围问题，所以解决方案非常简单（虽然它不是如此简单 :s) 定义一个全局变量并分配谷歌图书馆：
var localGoogle = google;
looks funny huh :)... then use the variable you defined to invoque the setOnCallback, it worked for me i hope it work for you..
看起来很有趣吧 :)...然后使用您定义的变量来调用 setOnCallback，它对我有用，我希望它对你有用..
$(document).ready(function(){
localGoogle.setOnLoadCallback(window.drawColumnChart1);
}
回答by bigtallbill
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".
对于替代解决方案，您可以使用“自动加载”将所需的包包含在脚本标记中。这不需要“google.setOnLoadCallback”。
see https://developers.google.com/loader/#AutoLoadingfor details.
有关详细信息，请参阅https://developers.google.com/loader/#AutoLoading。
So, you can do everything as you would normally from as jquery document ready event.
因此，您可以像平常一样从 jquery 文档就绪事件中执行所有操作。
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
还有一个向导可以为您设置 URL，但目前链接已损坏。无论如何，这里是：http: //code.google.com/apis/loader/autoloader-wizard.html
回答by gounane
you hav to call https://www.google.com/jsapiinstead of http://www.google.com/jsapi
你必须调用 https://www.google.com/jsapi而不是 http://www.google.com/jsapi
good luck
祝你好运
回答by Tehila
This works for me:
这对我有用：
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);
}
Demo: jsfiddle
演示：jsfiddle
回答by David Cazares
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function drawChart(gtitle,glabel,gwidth,gheight,gtype,gstart,gend,gid) {
$.ajax({
url: "http://localhost/reporte/response.php",
type: "GET",
dataType: "JSON",
cache: false,
async: false,
data: {start:gstart,end:gend,id:gid},
success: function(data) {
var len = 0;
if (data.length)
{
len = data.length;
}
if(len > 0)
{
dataarray = [[gtitle,glabel]];
for (var i = 0; i< len; i++) {
dataarray.push([data[i].label,data[i].value]);
}
}
else if(len==0)
{
}
},
error:function(data)
{
}
});
var values = new google.visualization.arrayToDataTable(dataarray);
var options = {title: gtitle,width:gwidth,height:gheight};
switch(gtype){
case 'PieChart':
var chart = new google.visualization.PieChart(document.getElementById('chart'));
break;
case 'LineChart':
var chart = new google.visualization.LineChart(document.getElementById('chart'));
break;
case 'ColumnChart':
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
break;
case 'AreaChart':
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
break;
}
chart.draw(values, options);
}
$(document).ready(function(){
//drawChart('Titulo del Grafico','Tickets',800,800,'PieChart',20141001,20141010,'procedure1');
//drawChart('Titulo del Grafico','Tickets',400,400,'ColumnChart',20141001,20141010,'procedure2');
//drawChart('Titulo del Grafico','Tickets',400,400,'LineChart',20141001,20141010,'procedure3');
drawChart('Titulo del Grafico','Tickets',600,400,'AreaChart',20141001,20141010,'procedure4');
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
回答by Andomar
Try to close the call to ready?
尝试关闭对ready?
$(document).ready(function(){
...
});
^^^
