如何根据行数设置Google Chart高度？

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 for 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或者其他东西