显示谷歌可视化API在Fancybox (JS弹出)

Show Google Visualization API within Fancybox (JS pop-up)

本文关键字：JS 弹出 Fancybox 谷歌 可视化 API 显示      更新时间：2023-09-26

所以我基本上试图嵌入一个谷歌可视化图表在一个花哨的盒子(JS弹出)。这张图表正确地显示在这页上。但不是在花哨的盒子里。什么好主意吗?

下面是我使用的代码

 $(".class").fancybox(function() { 
      drawChart();
 });

—edit—

 $(".view_research").fancybox({
 'onStart'   : drawChart
 });

**此编辑也不起作用，但至少使用fancybox

允许的参数之一。

点击链接时显示的是fancybox加载图像。但是实际的弹出窗口永远不会加载。

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

提前感谢，菲尔。

为了让这个工作，你需要:

  1. 使用fancybox调用
    2. 的onComplete选项
  2. 明确地为要在其中绘制图表的div指定宽度和高度样式属性

在尝试将图表放入其中之前，使用gviz让div可见/绘制是很常见的，否则您最终会得到一些非常奇怪的图表(不确定当您尝试在不可见的div中呈现图表时发生了什么)。onComplete负责这个。在其他情况下，使用gviz图像库是解决该问题的一个很好的方法。

无论如何，这里有一个使用fanybox和gviz的工作示例(取自google代码游乐场的饼状图代码):

  <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>

drawChart函数必须明确地将图表绘制到由fancybox创建的弹出窗口上，仅在回调内部调用该函数将不起任何作用

相关文章：