我在页面上有两个并排的图表,并且希望在调整窗口大小时调整它们的大小:它们的容器设置为50%宽度,根据示例,这应该足够了 .
可以找到自动调整图表大小的工作示例@ http://jsfiddle.net/2gtpA/
我可以看到一个非工作的例子来重现这个问题@ http://jsfiddle.net/4rrZw/2/
NOTE :您必须多次调整框架大小以重现问题(小于>大>小应该这样做)
我认为这一切都取决于你声明容器的方式......粘贴HTML代码,因为高级图表的JS代码在这里似乎并不相关......(两个例子中都相同)
<table style="width:100%;">
<tr>
<td style="width:50%;">
<div id="container" style="height: 50%"></div>
</td>
<td style="width:50%;"></td>
</tr>
</table>
3 回答
我把你的小提琴分成了一个有用的解决方案@ http://jsfiddle.net/AxyNp/这里最重要的代码片段是这样的:
解决方案依据this SO帖子的回答 .
看起来你能够正确调整图表容器(和单元格)大小的最佳方法就是依靠你自己的resize触发器 . 请注意,我在图表的选项中将重排设置为“false”以删除现有触发器 .
您可以避免使用javascript来执行调整大小并依赖于css . 这可以通过将HighChart渲染为具有以下内容的div来实现:
要确保容器的高度合适,您必须将此绝对定位的元素包装在另一个已明确设置高度的元素中:
通过将HighChart渲染到位置绝对元素,图表将响应父级中的宽度减少 .
用法
用于引导选项卡
在图表上
Html代码
参见jsfiddle的例子
http://jsfiddle.net/davide_vallicella/LuxFd/2/