JQueryUI对话框中的谷歌图表从单独的页面加载

Question

我有一个ajax函数，它在成功时构建一个JQuery模式对话框，下面是函数：

function employeeStatistics(url,id,name){
var tag = $("<div></div>");
$.ajax({
url: url,
data: { username: id, name: name },
success: function(data) {
tag.html(data).dialog({
modal: true,
title: "Statistics for: " + name,
width: ($(window).width() * 0.9),
height: ($(window).height() * 0.9),
close: function() { $(this).remove(); },
buttons: {
"Done": function () {
$(this).remove();
}
}
}).dialog('open');
}
});

}

它使用的url是statistics.php，它运行一系列查询，进行一些计算，并打印一些值。我一直想把一个图表放在弹出的对话框中(使用谷歌图表API)，但我没有成功。

以下是函数的调用方式：

onclick="employeeStatistics('statistics.php', 'Username', 'DisplayName');

我设置图表的第一种方式如下：

index.php:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['test', 'value'],
['1',     15],
['2',      8],
['3',      1],
['4',      4],
['5',      3]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('elchart'));
chart.draw(data, options);
}
</script>

statistics.php：

<div id="elchart" style="width: 900px; height: 500px;"></div>

使用此设置，我得到以下错误：

未捕获错误：容器未定义

所以我试着把它改成这样：

index.php:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

statistics.php

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['key', 'value'],
['1',     15],
['2',      8],
['3',      1],
['4',      4],
['5',      3]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}

虽然我在这一次没有得到同样的错误，但它返回的只是一个空白的白色页面，好像所有内容都被删除了(直到刷新为止)。

在过去的三个小时里，我一直在兜圈子，阅读每一篇关于这件事的文章，但我没有找到答案。

是否有可能将谷歌图表加载到一个模式对话框中，该对话框由不同的php文件填充，该文件来自调用它的地方？

很抱歉，如果我把这个声音弄糊涂了，我很难在脑海中想象出来。。。

Answer 1

与一位朋友合作时，他发现如果您删除

google.setOnLoadCallback(drawChart);

并更改

google.load("visualization", "1", {packages:["corechart"]});

至

google.load("visualization", "1", {packages:["corechart"], callback: drawCharts });

它有效！

Answer 2

尝试一下：

删除：

google.setOnLoadCallback(drawChart);

将drawChart功能添加到对话框的打开事件：

tag.html(data).dialog({
modal: true,
title: "Statistics for: " + name,
width: ($(window).width() * 0.9),
height: ($(window).height() * 0.9),
close: function() { $(this).remove(); },
open: function(event, ui){ drawChart(); },
buttons: {
"Done": function () {
$(this).remove();
}
}
}).dialog('open');