javascript - 如何使 div 匹配动态创建的谷歌图表高度

Question

我有一个动态加载 google timeline chart 的页面到一个分区上。当您向其添加项目时，时间线的高度会增加。如果图表比 div 小，它会在底部显示空白区域。如果图表较大，它会在侧面显示滚动条。

我希望容器 div 始终显示完整图表，或者换句话说，我希望容器 div 高度动态匹配图表的高度。

我试图估算每条图表线的平均大小，然后在加载图表时调整 div 高度:

$("#gantt_chart").height(data['num_contents']*46);

但是，尽管这在某种程度上可行，但它远非完美，因为高度的近似值开始随着每一行的增加而累积，并且 div 底部的空白空间增加，这根本不是一个优雅的解决方案。

我如何确保容器 div 始终显示完整图表？

我希望这已经足够清楚了。

非常感谢。

Answer 1

图表通过检查传递给 draw 调用的 height 选项或通过检查容器高度(如果 height)来确定其高度未指定选项。我建议使用该选项而不是通过 jQuery 更改 div 高度。我发现动态计算图表高度的最佳方法是将行高(通常为 41 像素)乘以行数，再加上顶部和底部的一些填充:

var height = data.getNumberOfRows() * 41 + 30;