Google jsapi 无法在 Jquery 对话框中加载
我试图将来自 google 可视化 api 的图表显示到 jQuery 对话框中,该对话框从另一个页面加载内容,但在尝试加载图表时收到一条 javascript 错误,提示“google 未定义”。 该示例有 2 个简单页面。托管对话框的“mainpage.htm”和托管动态加载到 jQuery 对话框中的图表的“chartpage.htm”。 这是“mainpage.htm”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<title></title>
<script type="text/javascript">
function openchart() {
w = $(window).width() - 100;
h = $(window).height() - 100;
var url = "chartpage.htm";
$("#chartDlg").load(url).dialog({ modal: true, width: w, height: h, title: 'MyChart', position: 'center' });
$("#chartDlg").dialog('open');
}
</script>
</head>
<body>
<a href="javascript: openchart();">Show Chart</a>
<div style="display:none" id="chartDlg"></div>
</body>
</html>
这是“chartpage.htm” Chartpage.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'NYSE');
data.addColumn('number', 'MIB');
data.addColumn('number', 'CAC40');
data.addRows([
[new Date(2008, 1, 1), 30040, 18550, 40645],
[new Date(2008, 2, 1), 30300, 18550, 40645],
[new Date(2008, 3, 1), 32000, 18450, 47645],
[new Date(2008, 4, 1), 31000, 18650, 45645],
[new Date(2008, 5, 1), 35000, 18850, 44645],
[new Date(2008, 6, 1), 30600, 18350, 47645],
[new Date(2008, 7, 1), 34000, 18450, 48645],
[new Date(2008, 8, 1), 30500, 18450, 44645],
[new Date(2008, 9, 1), 30500, 18550, 45645],
[new Date(2008, 10, 1), 30400, 18950, 46645],
[new Date(2008, 11, 1), 34000, 18950, 47645],
[new Date(2008, 12, 1), 30500, 18400, 45645],
[new Date(2009, 1, 1), 34500, 18350, 44645],
[new Date(2009, 2, 1), 30460, 18250, 40645],
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, { displayAnnotations: true, fill: 20 });
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 600px;">
</div>
</body>
</html>
作为独立页面打开,它工作完美,只有在加载到 Mainpage.htm 对话框中时才会失败。
看起来 google jsapi 根本没有加载。
有什么想法吗?
谢谢艾迪卡
I'm trying to show a Chart from google visualization api into a jQuery dialog that load the content from another page, but I receive a javascript error that said 'google is not defined' when try to load the chart.
The example has 2 simple pages. The 'mainpage.htm' that host the dialog and the 'chartpage.htm' that host the chart that is loaded dynamically into the jQuery dialog.
This is the 'mainpage.htm':
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" type="text/css" />
<title></title>
<script type="text/javascript">
function openchart() {
w = $(window).width() - 100;
h = $(window).height() - 100;
var url = "chartpage.htm";
$("#chartDlg").load(url).dialog({ modal: true, width: w, height: h, title: 'MyChart', position: 'center' });
$("#chartDlg").dialog('open');
}
</script>
</head>
<body>
<a href="javascript: openchart();">Show Chart</a>
<div style="display:none" id="chartDlg"></div>
</body>
</html>
And this is the 'chartpage.htm'
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { 'packages': ['annotatedtimeline'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'NYSE');
data.addColumn('number', 'MIB');
data.addColumn('number', 'CAC40');
data.addRows([
[new Date(2008, 1, 1), 30040, 18550, 40645],
[new Date(2008, 2, 1), 30300, 18550, 40645],
[new Date(2008, 3, 1), 32000, 18450, 47645],
[new Date(2008, 4, 1), 31000, 18650, 45645],
[new Date(2008, 5, 1), 35000, 18850, 44645],
[new Date(2008, 6, 1), 30600, 18350, 47645],
[new Date(2008, 7, 1), 34000, 18450, 48645],
[new Date(2008, 8, 1), 30500, 18450, 44645],
[new Date(2008, 9, 1), 30500, 18550, 45645],
[new Date(2008, 10, 1), 30400, 18950, 46645],
[new Date(2008, 11, 1), 34000, 18950, 47645],
[new Date(2008, 12, 1), 30500, 18400, 45645],
[new Date(2009, 1, 1), 34500, 18350, 44645],
[new Date(2009, 2, 1), 30460, 18250, 40645],
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, { displayAnnotations: true, fill: 20 });
}
</script>
</head>
<body>
<div id="chart_div" style="width: 800px; height: 600px;">
</div>
</body>
</html>
The chartpage.htm opened as standalone page it work perfect, it fails only when is loaded into the Mainpage.htm dialog.
It looks that the google jsapi is not loaded at all.
Any Ideas?
Thanks
Edika
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
有几件事值得尝试。
在对话框的 iframe 中加载 Chartpage.htm(我自己没有尝试过,但值得一试):
并将函数更改为:
或
将 google javascript 添加到 mainpage.htm:
Couple of things to try.
Load chartpage.htm in an iframe in the dialog (haven't tried this myself but worth a shot):
and change the function to:
OR
Add the google javascript to the mainpage.htm: