Question

我有一个动态加载google timeline chart到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;

Answer 2

虽然在文档中他们已经显示调整div的高度我们指定时间轴的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
};

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;

您也可以使用条形标签字体大小对其进行反向设计以设置条形的高度。

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

3 个答案: