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，它运行一堆查询，做一些数学运算，并打印一些值。我一直想在弹出的对话框中放置一个图表（使用Google Charts 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);
}

虽然我没有在这个上得到相同的错误，但它返回的只是一个空白的白页，好像所有内容都被删除了（直到你刷新）。

我花了最后3个小时进入圈子并阅读有关该事物的所有可能的文章，但我没有找到答案。

甚至可以将谷歌图表加载到一个模式对话框中，该对话框由一个不同的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函数添加到对话框的open事件中：

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');

从单独页面加载的JQuery UI对话框中的Google图表

2 个答案: