Google 可视化（PieChart/LineChart）Jquery Ajax Firefox 问题

Question

我在 Firefox 中遇到了一个错误，并进行了全面搜索，但似乎没有找到我遇到的问题的答案。

我的程序在 Chrome 和 IE 中运行良好，但 iframe 图表在 Firefox 中不起作用。

我使用处理程序，然后使用 jquery.ajax 来获取数据并运行脚本。

jQuery.ajax({
                    url: jQuery(this).attr("href"),
                    data: data,
                    dataType: 'script'
});

data = 饼图的所有信息和表格的所有信息。表格很好，但饼图 iframe 是空的。如果我按下退格按钮，就会显示饼图。这几乎就像饼图在 Firefox 中超出了范围。

除了我自己的数据之外，数据看起来像这样。这是从处理程序传递到 ajax 调用

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(5);
    data.setValue(0, 0, 'Work');
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 2);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 2);
    data.setValue(4, 0, 'Sleep');
    data.setValue(4, 1, 7);

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});

还有其他人遇到过类似的问题吗？我知道数据传递正确并且所有内容都已收到，但 Firefox 似乎无法很好地处理 iframe。

如果有人有任何建议或想法，那就太好了，

谢谢

Answer 1

我只在 FFox 上遇到同样的问题。

我解决了将所有内容包装在一个函数中并使用一个小的 setTimeout 调用它

function drawChart() {
  //...
}

setTimeout(drawChart, 200);

Answer 2

就在我读到你的帖子后几个小时，问题只出现在 FF 中，我找到了解决方案。在页面上导入 JQuery，

<script src="../GoogleJs/jquery-1.4.2.min.js" type="text/javascript"></script>

然后添加一个标记

$(document).ready(function () {
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

      function EndRequestHandler(sender, args) {
        drawVisualization()
      }

    });

，其中 drawVisualization() 是绘图函数。
它的作用就像魅力...

ps 谢谢你注意到 FF 是问题所在

Answer 3

上周我在 Firefox 上遇到了同样的问题，这两个答案的组合对我来说也很好。不同之处在于我使用 $.load 而不是 iframe，所以我当然不需要在 AJAX 获取的 pgae 中包含 jQuery。

在 chrome 中，以下内容适用于 AJAX 页面：

<script>
    google.setOnLoadCallback(drawChart, true);
</script>

然而，在 Firefox 中，这不起作用，所以我只是使用：

<script>
    $(document).ready(function() {
        function drawChart() {} // omitted
        drawChart();
    });
</script>

这在 Chrome 22 和 Firefox 16.0.1 中都对我有用