在 Fancybox 中显示 Google Visualization API（JS 弹出窗口）

发布于 2024-12-11 03:33:07 字数 467 浏览 0 评论 0原文

所以我基本上试图在 Fancybox（JS 弹出窗口）中嵌入 Google 可视化图表。图表在页面上正确显示......但在花式框中不正确。有什么想法吗？

这是我正在使用的代码

 $(".class").fancybox(function() { 

      drawChart();

 });

--- 编辑 ---

 $(".view_research").fancybox({

 'onStart'   : drawChart

 });

** 此编辑也不起作用，但至少使用 fancybox 允许的参数之一

当我单击链接时，会显示 fancybox 加载图像..但实际弹出窗口永远不会加载。

我还应该注意到，如果我从弹出窗口尝试加载的页面中删除 Google 图表，弹出窗口将顺利加载。

提前致谢，菲尔

原文

So I'm basically trying to embed a Google Visualization chart within a Fancybox (JS pop-up). The chart shows correctly on the page.. but not within the fancybox. Any ideas?

Here's the code i'm using

 $(".class").fancybox(function() { 

      drawChart();

 });

--- edit ---

 $(".view_research").fancybox({

 'onStart'   : drawChart

 });

** this edit does not work either, but at least uses one of the arguments allowed by fancybox

The fancybox loading image is displayed when I click the link.. but the actual pop-up never loads.

I should also note that if I remove the Google chart from the page that the pop-up is trying to load, the pop-up loads without a hitch.

Thanks in advance,
Phil

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌︼了一个春 2024-12-18 03:33:07

为了使其工作，您需要：

使用 fancybox 调用的 onComplete 选项
显式指定将在其中绘制图表的 div 的宽度和高度样式属性

这对于 gviz 来说很常见在尝试将图表放入其中之前，div 必须是可见/绘制的，否则您最终可能会得到一些看起来非常奇怪的图表（不确定当您尝试在不可见的 div 中渲染图表时会发生什么..）。 onComplete 负责处理这个问题。在其他情况下，使用 gviz 图像库是解决该问题的一个很好的解决方法。

无论如何，这是一个使用 fancybox 和 gviz 的工作示例（饼图代码取自 google code Playground ):

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
      <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
      <script type="text/javascript">
          google.load('visualization', '1', {packages: ['piechart']});
      </script>
      <script type="text/javascript">
      </script>
      <script>

      function drawVisualization() {
        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);
        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('data')).draw(data);
      }

      $(document).ready(function() {
        $("a#inline").fancybox({
          'hideOnContentClick': true,
          onComplete: drawVisualization
        });
      });

      </script>
    </head>
    <body>
      <a id="inline" href="#data">Click here to see chart</a>
      <div style="display:none"><div style='height:200px;width:200px' id="data"></div></div>
    </body>
  </html>

In order to get this to work you need to:

use the onComplete option of the fancybox call
explicitly specify a width and height style attribute for the div in which the chart will be drawn

It's common enough with gviz for the div to be visible/drawn before trying to put a chart in it, else you can end up with some pretty odd looking charts (not sure what goes on when you try to render a chart in an invisible div..). The onComplete takes care of this. Using the gviz image library is a good workaround for that problem in other cases.

Anyway, here's a working example of using fancybox and gviz (pie chart code taken from google code playground):

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <script type="text/javascript" src="http://www.google.com/jsapi"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script type="text/javascript" src="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.js"></script>
      <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
      <script type="text/javascript">
          google.load('visualization', '1', {packages: ['piechart']});
      </script>
      <script type="text/javascript">
      </script>
      <script>

      function drawVisualization() {
        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);
        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('data')).draw(data);
      }

      $(document).ready(function() {
        $("a#inline").fancybox({
          'hideOnContentClick': true,
          onComplete: drawVisualization
        });
      });

      </script>
    </head>
    <body>
      <a id="inline" href="#data">Click here to see chart</a>
      <div style="display:none"><div style='height:200px;width:200px' id="data"></div></div>
    </body>
  </html>

回复收藏 0 原文