0

我们有一个生成报告的 Java servlet。现在我们包含了一个选项来生成一个包含 N 个 highcharts 图表的 highcharts 图。该图应该在模态元素（灯箱，iframe，没关系）上打开。我使用了fancybox并在iframe中显示了图表加载，但是高度和宽度都搞砸了。

似乎浏览器/花式框正在/正在计算图表元素的大小，然后再渲染 highcharts，并显示小尺寸的 iframe。

我并不一定要使用 iframe，尽管该图是从 servlet URL 调用的，并且不可能事先知道它的大小。

如果是这样，我可以使用另一个 jquery 库。

使用fancybox 2.0.5、jquery 1.7.2、highcharts 2.2.5

4

1 回答 1

1

我解决了这个问题，将 highcharts HTML 容器从浮动 div 更改为表格结构，并将 fancybox 模式从 iframe 更改为 ajax。

这样，fancybox 可以读取正确的大小。

Fancybox 是唯一一个能够从链接正确触发的 jquery 插件（我也测试了 jqmodal 和 simplemodal）。在页面加载之后，链接由页面上的 ajax 调用动态加载。

这是 $(document).ready( 调用上的代码

$("a.modalLightbox").fancybox({
type : 'ajax'
autoSize : true,
padding : 5,
fitToView : true,
});

表格的宽度是通过内联 CSS 设置的（不是最好的，但必须内联完成，因为每个图表都有自己的宽度，由 servlet 计算）。

全浮点方法将 iframe 的 body 元素保留为 0 高度和继承的宽度。

于 2012-07-25T15:50:04.850 回答