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

Question

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

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

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

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

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

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

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

非常感谢。

Answer 1

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

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

Answer 2

虽然在文档中他们已经展示了从我们指定时间线 id 的位置调整 div 的高度，但我建议您从内部方法设置高度。

// set the height for padding(padding height)
var pH = 40;

// get total height of rows (row height)
var rH = dataTable.getNumberOfRows() * 15;

// total chart height (chart height)
var cH = rH + pH;

// Now set this chart height to the timeline via option object
// apart from height, other attributes are just optional
var options = {
   height: chartHeight,
   colors: ['#339900', '#e6e600', '#B00000'],
   tooltip: {
        isHtml: true
   },
   timeline: {
        colorByRowLabel: false
   },
   avoidOverlappingGridLines: true
};

Answer 3

我自己也在尝试做同样的事情。最佳答案并不完全正确，有时会导致内部滚动条出现。

这对我有用：

var barLabelFontSize = 12;                                          //default font size for bar labels
try{barLabelFontSize = options.timeline.barLabelStyle.fontSize;     //bar height is dependent on the bar label's font size that you set...
}catch(e){}
var barHeight = barLabelFontSize * 1.196;                           //found in google api as: this.PU = 1.916 * this.UF.fontSize;
var barMargin = barLabelFontSize * 0.75;                            //found in google api as: this.Rfa = .75 * this.UF.fontSize;
var rowHeight = barHeight + barMargin * 2;                          //found in google api as: b.height = 2 * this.Rfa + this.PU (+additional complication for grouped bars, if anyone wants to try work that out it was: b.height = 2 * this.Rfa + this.PU * a.SI.length + this.Qfa * (a.SI.length - 1); (where Qfa is 0.583 * font size, and a.SI.length is the number of grouped bars displayed on the row) 
var chartAreaHeight = rowHeight * dataTable.getNumberOfRows();
var axisHeight = 24;                                                //worked out by querying: document.getElementById('timelineChart') getElementsByTagName('svg')[0].getBBox().height;
var whiteSpaceHeight = 28;                                          //trail-and-error to find how much whitespace was required to stop a scroll bar appearing, 27 works too, but I rounded up to play it safe
var chartHeight = chartAreaHeight + axisHeight + whiteSpaceHeight;

您还可以对其进行逆向工程，以使用条形标签字体大小设置条形的高度。