Question

＆＃13;

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);
        }

＆＃13;

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

＆＃13;

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

如您所见，未指定高度。根据Google Charts文档，默认高度应为＆＃34;包含元素的高度＆＃34;。事实并非如此。

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

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

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

谢谢，尼克

Answer 1

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

1）第一次正常绘制时间轴： chart.draw（dataTable，options）;

2）获取时间轴的高度： var realheight = parseInt（$（＆＃34;＃ yourtimelinecontainer div：first-child div：first-child div：first-child div svg＆＃34;）。attr（＆＃34; height＆＃ 34））+ 70;

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

4）重绘： chart.draw（dataTable，options）;

祝你好运

如果未指定高度，则防止Google时间轴图表的高度为200px

1 个答案: