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

Question

我有一个页面可以动态地将谷歌时间线图表加载到div上.在您添加项目时,时间轴的高度会增加.如果图表小于div,则底部的空白区域将显示该图表.如果图表较大,则会在侧面显示滚动条.

我想要的是容器div总是显示完整的图表,或者另一种方式,我希望容器div高度动态匹配图表的高度.

我试图近似每个图表行的平均大小,然后在我加载图表时调整div高度:

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

但是,虽然它以某种方式起作用,但它远非完美,因为高度的近似开始随着每个附加线积累而且div底部的空白空间增加,这根本不是一个优雅的解决方案.

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

我希望这很清楚.

非常感谢.

Answer 1

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

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