Javascript 在Fancybox中显示Google可视化API（JS弹出窗口）_Javascript_Jquery_Fancybox_Google Visualization

Javascript 在Fancybox中显示Google可视化API（JS弹出窗口）

javascript jquery google-visualization

Javascript 在Fancybox中显示Google可视化API（JS弹出窗口）,javascript,jquery,fancybox,google-visualization,Javascript,Jquery,Fancybox,Google Visualization,所以我基本上是想在Fancybox（JS弹出窗口）中嵌入一个Google可视化图表。图表正确地显示在页面上。。但不是在fancybox中。有什么想法吗这是我正在使用的代码 $(".class").fancybox(function() { drawChart(); }); ---编辑--- **此编辑也不起作用，但至少使用了fancybox允许的一个参数单击链接时会显示fancybox加载图像。。但实际的弹出窗口从未加载我还应该注意，如果我从弹出窗口试图加载的页面中

所以我基本上是想在Fancybox（JS弹出窗口）中嵌入一个Google可视化图表。图表正确地显示在页面上。。但不是在fancybox中。有什么想法吗

这是我正在使用的代码

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

      drawChart();

 });

---编辑---

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

单击链接时会显示fancybox加载图像。。但实际的弹出窗口从未加载

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

提前感谢,，

Phil

函数必须专门将图表绘制到由fancybox创建的弹出窗口上，仅在回调函数中调用该函数不会有任何好处。

要使其正常工作，您需要：

使用fancybox调用的

onComplete

选项

为要绘制图表的div显式指定宽度和高度样式属性

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

无论如何，这里有一个使用fancybox和gviz的工作示例（饼图代码取自）：


load（'visualization'，'1'，{packages:['piechart']}）；
函数drawVisualization（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Task'）；
data.addColumn（'数字'，'每天小时'）；
数据。添加行（5）；
data.setValue（0,0，'工作'）；
数据设置值（0,1,11）；
data.setValue（1,0，'Eat'）；
数据设置值（1,1,2）；
设置值（2，0，'通勤'）；
数据设置值（2,1,2）；
data.setValue（3,0，‘看电视’）；
数据设置值（3,1,2）；
data.setValue（4,0，'Sleep'）；
数据设置值（4,1,7）；
//创建并绘制可视化。
新的google.visualization.PieChart（document.getElementById（'data'））.draw（data）；
}
$（文档）.ready（函数（）{
$（“内联”）.fancybox({
“hideOnContentClick”：true，
未完成：绘图可视化
});
});

你能提供一些代码来说明你在说什么吗？thxI找不到将函数作为参数的fancybox函数。再次检查。是的，这是正确的。更新见我的更新答案如果你说你正在加载另一个URl，它实际上包含drawChart（）方法和相关div，可能你可以在该文档的document onload事件上调用drawChart（）函数，而无需通过fancybox函数调用它。@Manjula是一个非常聪明的主意。。不幸的是，它没有起作用

 $(".view_research").fancybox({

 'onStart'   : drawChart

 });

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