Javascript 如何使div与动态创建的google图表高度匹配

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

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

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

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

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

如何确保container div始终显示完整的图表

我希望这足够清楚

---

非常感谢。

图表通过检查传递到

draw

调用中的

height

选项，或者如果未指定

height

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

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

---

虽然在文档中，他们显示了调整div高度的方法，我们从中指定了timeline的id，但我建议您从内部方法设置高度

// 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
};

---

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

以下是对我有效的方法：

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;

---

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

这是jquery吗？如果问题是添加了jquery标记，则可能需要将该标记添加到问题中。感谢您的推荐。在css上，将div height更改为

height:auto这样它会自动调整高度。非常感谢您的提示。添加
$（'#container_div'）.css（'height'，'auto'）没有帮助。加载页面时将
style=“height:auto；”“
添加到div也没有帮助。谢谢。经过几个小时的调查，这是我能找到的最有效的解决方案。不久前，但我想知道如果一行跨越多行，这是如何工作的。你还在使用谷歌图表吗？有什么想法吗？我已经有几年没有使用可视化API了，所以我对它有点生疏了。您是指DataTable中有多行呈现在图表（如时间线图表）中的一行上的情况吗？如果是这样，我相信您可以使用google.visualization.data.group方法（在时间线图的情况下，通过第一列）对数据表中的数据进行分组，以获得渲染行数。这是一个很好的解决方案！我把它用于谷歌甘特图。但是我看到甘特图的行的高度是42，而不是41。无论如何谢谢你！我放弃了实现动态分类的尝试，选择了固定的分类大小（周、月等）。不过，我对你们的答案还有一点需要补充的地方，可以稍微改进一下。如果每行有多个条形图，则解决方案将不起作用。getNumberOfRows统计dataTable中的所有行，而不是实际图形中的行。如果在数组的第一个元素中有标签字符串，那么就可以使用它。