如果未指定高度,则防止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站点,因为stackoverflow中的这个小部件不允许在没有扩展名的情况下加载外部js文件)

如您所见,没有指定高度.根据Google Charts文档,默认高度应为"包含元素的高度".不是这种情况.

如果您查看生成的html,它会在图表周围展示一个容器,并将高度设置为200px.

容器中的所有SVG元素都已指定高度.如何在不添加滚动条的情况下让它占用尽可能多的高度？

用估计的行高计算高度没有任何意义.我可以看到在浏览器中渲染SVG元素后查找所有RECT元素并获得每个元素的高度都可以工作......但这似乎是很多额外的工作.我错过了什么吗？

谢谢,尼克

Answer 1

有一个解决方案(不是一个聪明的解决方案,但它的工作原理:):

1)通常第一次绘制时间轴: chart.draw(dataTable,options);

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

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

4)重绘: chart.draw(dataTable,options);

最好的祝福