gpt4 book ai didi

javascript - 在 Fancybox 中显示 Google Visualization API(JS 弹出窗口)

转载 作者:行者123 更新时间:2023-11-29 22:29:12 25 4
gpt4 key购买 nike

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

这是我正在使用的代码

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

drawChart();

});

--- 编辑---

 $(".view_research").fancybox({

'onStart' : drawChart

});

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

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

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

提前致谢,菲尔

最佳答案

为了让它工作,你需要:

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

在 gviz 中,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>

关于javascript - 在 Fancybox 中显示 Google Visualization API(JS 弹出窗口),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7851576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com