如何根据行数设置谷歌图表高度？

Question

我有一个谷歌堆积条形图，它从数据库中提取数据并根据所述数据绘制图表。我能够四处搜索并找到一种根据行数动态设置高度的方法 - 但对于我的一个搜索过滤器，图表看起来很遥远。

代码如下，适用于我的 5 个过滤器中的 4 个，但在第 5 个过滤器中，行数变得更大（大约 40-50）。

代码：

            var paddingHeight = 40;
            var rowHeight = data.getNumberOfRows() * 50;
            var chartHeight = rowHeight + paddingHeight;

            var options = {
                titlePosition: 'none',
                width: 1400,
                height: chartHeight,
                legend: { position: 'top', maxLines: 3 },
                bar: { groupWidth: '50%' },
                isStacked: true,
                hAxis: {
                    title: 'Business Hours (excluding weekends & holidays)'
                },
                colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
                annotations: {
                    alwaysOutside: true,
                    textStyle: {
                        color: '#000000'
                    }
                }
            }

产生以下结果。这第一张图片是我的 5 个过滤器中的 4 个的样子。

第二张图片显示我明显做错了什么。

这是什么原因，我该如何解决？

编辑：我怀疑我的问题是以下之一： 当我使用最新的搜索参数刷新页面时，我的数据行没有被正确计算，或者我的 div 的设置和相互交互的方式有问题。我尝试调整 chartHeight 背后的数学并删除填充，无论哪种方式似乎都具有相同的效果。我是在正确的轨道上还是我还缺少其他东西？

Answer 1

需要为height和chartArea.height设置选项

这里，推荐使用rowHeight换成chartArea.height

        var paddingHeight = 40;
        var rowHeight = data.getNumberOfRows() * 50;
        var chartHeight = rowHeight + paddingHeight;

        var options = {
            titlePosition: 'none',
            width: 1400,

            height: chartHeight,
            chartArea: {
              height: rowHeight,
            },

            legend: { position: 'top', maxLines: 3 },
            bar: { groupWidth: '50%' },
            isStacked: true,
            hAxis: {
                title: 'Business Hours (excluding weekends & holidays)'
            },
            colors: ['#0066ff', '#33cc33', '#ffcc00', '#ff0000'],
            annotations: {
                alwaysOutside: true,
                textStyle: {
                    color: '#000000'
                }
            }
        }

您需要为图例、y 轴等留出一些空间...

chartArea 具有以下属性

top
left
height
width

如果图例在顶部，您需要将 top 设置为 20 或其他内容