如果未指定高度，请阻止Google时间轴图表的高度为200像素 [英] Prevent Google Timeline Chart from having a height of 200px if no height is specified

问题描述

  google.load（visualization，1，{packages：[timeline]}）; google.setOnLoadCallback（drawChart）;函数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），新日期（2015,1,2）]，['Excavation'，'Clean Road'，新日期（2015,1,4），新日期（2015,1,5）]，['返回填充'，'加载填充'，新日期（2015,1,16），新日期（2015,1,16）]，['返回填充'，'Bob Cat'，新日期（2015,1,16）， （2015,1，20）]，['Back Fill'，'Clean Date（2015,1，16）]，['Back Fill'，'Backfill' （2015,20,20），新日期（2015,1,20）]，['先前等级'，'等级转储'，新日期（2015,2,23），新日期（2015,20,20） （2015,2,23）]，['Pre Grade'，'Laborer Work'，新日期（2015,2,23），新日期（2015,2,26）]， ['Pre Grade'，'Labourr Work'，新日期（2015,2,28），新日期（2015,2,28）]，'Loaming'，'Loam Loam'，新日期（2015,3,15 ），新日期（2015,3,15），['Loaming'，'等级转储'，新日期（2015,3,15），新日期（2015,3,15）]，['Loaming' （2015,3,15），新日期（2015,3,15），['Loaming'，'Loam'，新日期（2015,3,16），新日期18）]]）; var options = {timeline：{groupByRowLabel：true}}; chart.draw（dataTable，options）; }  

< div id =timeline>< ; / div>

href =http://jsfiddle.net/ywsgmagc/ =nofollow> http://jsfiddle.net/ywsgmagc/
（请转到实际的jsfiddle.net网站，因为这个在stackoverflow中的小部件不允许在没有扩展名的情况下加载外部js文件）

正如你所看到的，没有指定高度。根据Google Charts文档，默认高度应该是包含元素的高度。这不是这种情况。

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

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

使用估计的行高计算高度不会产生任何结果感。在浏览器中呈现它并查找所有RECT元素并获得每个元素的高度后，我可以看到它们经过了SVG元素......但这看起来像是很多额外的工作。我错过了什么？

感谢，
Nick

解决方案

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

1）通常第一次绘制您的时间线：
chart.draw（dataTable，options）;
$ b

2）获取时间轴的高度：
var realheight = parseInt（$（＃ yourtimelinecontainer attr（height））+ 70;

p>

3）在选项中设置时间线的真实高度：
options.height = realheight;
$ b

4）redraw： em>
chart.draw（dataTable，options）;

最好的问候

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>

I have this sample chart here: http://jsfiddle.net/ywsgmagc/ (Please just go to the actualy jsfiddle.net site, as this widget in stackoverflow doesn't allow external js files to be loaded without an extension)

As you can see, no height is specified. According to the Google Charts documentation, the default height should be "height of the containing element". This is not the case.

If you look at the html generated, it ads a container around the chart and sets the height to 200px.

All the SVG elements within the container have the height already specified. How is it possible to just have it take up as much height as it needs without adding a scroll bar?

Calculating the height with an estimated row height doesn't make any sense. I can see going through the SVG elements after it is rendered in the browser and looking for all RECT elements and getting the height of each of those elements would work... but that seems like a lot of extra work. Am I missing something?

Thanks, Nick

解决方案

There is a solution (not a clever solution but it works :) :

1) Draw your timeline a first time normally : chart.draw(dataTable, options);

2) Get the height of the timeline : var realheight=parseInt($("#yourtimelinecontainer div:first-child div:first-child div:first-child div svg").attr( "height"))+70;

3) set the real height of the timeline in options : options.height=realheight;

4) redraw : chart.draw(dataTable, options);

Best regards

这篇关于如果未指定高度，请阻止Google时间轴图表的高度为200像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！