如果未指定高度，则防止 Google 时间线图表具有 200px 的高度

Question

google.load("visualization", "1", {
            packages: ["timeline"]
        });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            var container = document.getElementById('timeline');
            var chart = new google.visualization.Timeline(container);
            var dataTable = new google.visualization.DataTable();

            dataTable.addColumn({
                type: 'string',
                id: 'JobType'
            });
            dataTable.addColumn({
                type: 'string',
                id: 'WorkType'
            });
            dataTable.addColumn({
                type: 'date',
                id: 'Start'
            });
            dataTable.addColumn({
                type: 'date',
                id: 'End'
            });
            dataTable.addRows([
                ['Excavation', 'Compaction', new Date(2015, 1, 1), new Date(2015, 1, 4)],
                ['Excavation', 'Step Push', new Date(2015, 1, 1), new Date(2015, 1, 2)],
                ['Excavation', 'Clean Road', new Date(2015, 1, 4), new Date(2015, 1, 5)],
                ['Back Fill', 'Load Fill', new Date(2015, 1, 16), new Date(2015, 1, 16)],
                ['Back Fill', 'Bob Cat', new Date(2015, 1, 16), new Date(2015, 1, 16)],
                ['Back Fill', 'Backfill', new Date(2015, 1, 17), new Date(2015, 1, 20)],
                ['Back Fill', 'Clean Road', new Date(2015, 1, 20), new Date(2015, 1, 20)],
                ['Pre Grade', 'Level Dump', new Date(2015, 2, 23), new Date(2015, 2, 23)],
                ['Pre Grade', 'Compaction', new Date(2015, 2, 23), new Date(2015, 2, 23)],
                ['Pre Grade', 'Labourer Work', new Date(2015, 2, 23), new Date(2015, 2, 26)],
                ['Pre Grade', 'Labourer Work', new Date(2015, 2, 28), new Date(2015, 2, 28)],
                ['Loaming', 'Load Loam', new Date(2015, 3, 15), new Date(2015, 3, 15)],
                ['Loaming', 'Level Dump', new Date(2015, 3, 15), new Date(2015, 3, 15)],
                ['Loaming', 'Compaction', new Date(2015, 3, 15), new Date(2015, 3, 15)],
                ['Loaming', 'Loam', new Date(2015, 3, 16), new Date(2015, 3, 18)]
            ]);
            
            var options = {
                timeline: {
                    groupByRowLabel: true
                }
            };

            chart.draw(dataTable, options);
        }

<div id="timeline"></div>

我这里有这张示例图表：http://jsfiddle.net/ywsgmagc/ （请直接转到实际 jsfiddle.net 站点，因为 Whosebug 中的这个小部件不允许在没有扩展名的情况下加载外部 js 文件）

如您所见，未指定高度。根据 Google 图表文档，默认高度应为 "height of the containing element"。事实并非如此。

如果您查看生成的 html，它会在图表周围添加一个容器并将高度设置为 200 像素。

容器内的所有 SVG 元素都已指定高度。怎么可能不加滚动条就让它占据多少高度？

用估计的行高计算高度没有任何意义。我可以看到在浏览器中呈现后浏览 SVG 元素并查找所有 RECT 元素并获取每个元素的高度会起作用……但这似乎需要很多额外的工作。我错过了什么吗？

谢谢，尼克

Answer 1

有一个解决方案（不是一个聪明的解决方案，但它有效:)：

1) 第一次正常画时间线: chart.draw（数据表，选项）；

2)获取时间轴的高度： var realheight=parseInt($("#yourtimelinecontainer div:first-child div:first-child div:first-child div svg").属性("height"))+70;

3) 在选项中设置时间线的实际高度: options.height=实际高度；

4) 重绘： chart.draw（数据表，选项）；

此致

如果未指定高度，则防止 Google 时间线图表具有 200px 的高度

Prevent Google Timeline Chart from having a height of 200px if no height is specified

google-visualization