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

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

在这里，推荐使用rowHeightforchartArea.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