Google Gantt图表高度检测 [英] Google Gantt chart height detection
本文介绍了Google Gantt图表高度检测的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正面临Google甘特图无法(?)正确显示高度的情况，因此在低分辨率下，我无法看到图表中的所有数据，因为它没有显示垂直滚动条.
I am facing a situation where the Google Gantt chart can't(?) render the height properly, thus in low resolutions I can't see all the data in chart, because it does not show the vertical scrollbar.
- 使用最大化的浏览器打开它(取决于分辨率，您将看到完整的行)
-
在将浏览器调整为较小的尺寸后将其打开，您将看到该图表不会生成滚动条，但会剪断线条.
- Open it with browser maximized (depending on your resolution you will see the full lines)
Open it with the browser resized, smaller and you will see the chart does not generate the scrollbar but cuts the lines.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent done');
data.addColumn('string', 'Dependencies');
data.addRows([
['C300300 (M, AeX)', 'C300300 (M, AeX)', 'DD', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 117.96, null],
['C671925 (M, XeR)', 'C671925 (M, XeR)', 'DD', new Date(2016, 2, 16), new Date(2016, 11, 16), null, 106.55, null],
['C769868 (M, YeB)', 'C769868 (M, YeB)', 'DD', new Date(2016, 5, 7), new Date(2017, 3, 30), null, 64.22, null],
['C678421 (M, XeR)', 'C678421 (M, XeR)', 'DD', new Date(2016, 2, 22), new Date(), null, 153.21, null],
['C678428 (M, YeB)', 'C678428 (M, YeB)', 'DD', new Date(2016, 9, 3), new Date(2017, 0, 31), null, 76.67, null],
['C772279 (M, YeB)', 'C772279 (M, YeB)', 'DD', new Date(2016, 5, 1), new Date(2016, 9, 31), null, 142.11, null],
['C769877 (M, YeB)', 'C769877 (M, YeB)', 'DD', new Date(2016, 9, 3), new Date(2017, 2, 31), null, 51.4, null],
['C800305 (M, XeR)', 'C800305 (M, XeR)', 'DD', new Date(2016, 5, 28), new Date(2017, 0, 31), null, 87.1, null],
['C774664 (M, XeR)', 'C774664 (M, XeR)', 'DD', new Date(2016, 6, 11), new Date(), null, 123.94, null],
['C803552 (M, XeR)', 'C803552 (M, XeR)', 'DD', new Date(2016, 6, 18), new Date(2016, 9, 14), null, 192.05, null],
['C803555 (M, XeR)', 'C803555 (M, XeR)', 'DD', new Date(2016, 8, 5), new Date(2017, 3, 30), null, 50.63, null],
['C843561 (M, AeX)', 'C843561 (M, AeX)', 'DD', new Date(2016, 8, 16), new Date(2016, 11, 6), null, 134.57, null],
['C840916 (M, XeR)', 'C840916 (M, XeR)', 'DD', new Date(2016, 7, 2), new Date(2017, 1, 3), null, 83.24, null],
['C867128 (A, YeB)', 'C867128 (A, YeB)', 'DD', new Date(2016, 10, 14), new Date(2017, 2, 1), null, 46.73, null],
['C850076 (M, YeB)', 'C850076 (M, YeB)', 'DD', new Date(2016, 8, 16), new Date(2017, 1, 28), null, 66.06, null],
['C887165 (M, XeR)', 'C887165 (M, XeR)', 'DD', new Date(2016, 8, 13), new Date(2017, 1, 28), null, 66.67, null],
['C907859 (M, YeB)', 'C907859 (M, YeB)', 'DD', new Date(2016, 8, 20), new Date(2017, 1, 28), null, 65.22, null],
['C904155 (L, YeB)', 'C904155 (L, YeB)', 'DD', new Date(2016, 11, 28), new Date(2017, 0, 20), null, 26.09, null],
['C769875 (M, YeB)', 'C769875 (M, YeB)', 'DD', new Date(2016, 10, 21), new Date(2017, 0, 31), null, 60.56, null],
['C1034751 (L, YeB)', 'C1034751 (L, YeB)', 'DD', new Date(2016, 10, 30), new Date(2017, 0, 27), null, 58.62, null]
]);
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
xWidth = w.innerWidth || e.clientWidth || g.clientWidth,
yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;
var options = {
height: yHeight - 165,
width: "100%",
hAxis: {
textStyle: {
fontName: ["RobotoCondensedRegular"]
}
},
gantt: {
labelStyle: {
fontName: ["RobotoCondensedRegular"],
fontSize: 12,
color: '#757575',
}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gantt(container);
chart.draw(data, options);
}
我还使用了Google时间轴图表，并在需要时显示了竖线.
I also use the Google Timeline chart and it shows the vertical bar when needed.
任何建议将不胜感激.谢谢.
Any suggestion will be appreciated. Thanks.
推荐答案
而不是将图表的高度设置为屏幕尺寸
instead of setting the height of the chart to the screen size,
尝试设置特定的 trackHeight
总高度为...
高度:data.getNumberOfRows()* trackHeight
请参见以下工作片段，滚动条似乎以这种方式出现...
see following working snippet, the scroll bar seems to appear with this approach...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('string', 'Resource');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent done');
data.addColumn('string', 'Dependencies');
data.addRows([
['C300300 (M, AeX)', 'C300300 (M, AeX)', 'DD', new Date(2015, 3, 20), new Date(2016, 8, 30), null, 117.96, null],
['C671925 (M, XeR)', 'C671925 (M, XeR)', 'DD', new Date(2016, 2, 16), new Date(2016, 11, 16), null, 106.55, null],
['C769868 (M, YeB)', 'C769868 (M, YeB)', 'DD', new Date(2016, 5, 7), new Date(2017, 3, 30), null, 64.22, null],
['C678421 (M, XeR)', 'C678421 (M, XeR)', 'DD', new Date(2016, 2, 22), new Date(), null, 153.21, null],
['C678428 (M, YeB)', 'C678428 (M, YeB)', 'DD', new Date(2016, 9, 3), new Date(2017, 0, 31), null, 76.67, null],
['C772279 (M, YeB)', 'C772279 (M, YeB)', 'DD', new Date(2016, 5, 1), new Date(2016, 9, 31), null, 142.11, null],
['C769877 (M, YeB)', 'C769877 (M, YeB)', 'DD', new Date(2016, 9, 3), new Date(2017, 2, 31), null, 51.4, null],
['C800305 (M, XeR)', 'C800305 (M, XeR)', 'DD', new Date(2016, 5, 28), new Date(2017, 0, 31), null, 87.1, null],
['C774664 (M, XeR)', 'C774664 (M, XeR)', 'DD', new Date(2016, 6, 11), new Date(), null, 123.94, null],
['C803552 (M, XeR)', 'C803552 (M, XeR)', 'DD', new Date(2016, 6, 18), new Date(2016, 9, 14), null, 192.05, null],
['C803555 (M, XeR)', 'C803555 (M, XeR)', 'DD', new Date(2016, 8, 5), new Date(2017, 3, 30), null, 50.63, null],
['C843561 (M, AeX)', 'C843561 (M, AeX)', 'DD', new Date(2016, 8, 16), new Date(2016, 11, 6), null, 134.57, null],
['C840916 (M, XeR)', 'C840916 (M, XeR)', 'DD', new Date(2016, 7, 2), new Date(2017, 1, 3), null, 83.24, null],
['C867128 (A, YeB)', 'C867128 (A, YeB)', 'DD', new Date(2016, 10, 14), new Date(2017, 2, 1), null, 46.73, null],
['C850076 (M, YeB)', 'C850076 (M, YeB)', 'DD', new Date(2016, 8, 16), new Date(2017, 1, 28), null, 66.06, null],
['C887165 (M, XeR)', 'C887165 (M, XeR)', 'DD', new Date(2016, 8, 13), new Date(2017, 1, 28), null, 66.67, null],
['C907859 (M, YeB)', 'C907859 (M, YeB)', 'DD', new Date(2016, 8, 20), new Date(2017, 1, 28), null, 65.22, null],
['C904155 (L, YeB)', 'C904155 (L, YeB)', 'DD', new Date(2016, 11, 28), new Date(2017, 0, 20), null, 26.09, null],
['C769875 (M, YeB)', 'C769875 (M, YeB)', 'DD', new Date(2016, 10, 21), new Date(2017, 0, 31), null, 60.56, null],
['C1034751 (L, YeB)', 'C1034751 (L, YeB)', 'DD', new Date(2016, 10, 30), new Date(2017, 0, 27), null, 58.62, null]
]);
var trackHeight = 40;
var options = {
height: data.getNumberOfRows() * trackHeight,
width: "100%",
hAxis: {
textStyle: {
fontName: ["RobotoCondensedRegular"]
}
},
gantt: {
labelStyle: {
fontName: ["RobotoCondensedRegular"],
fontSize: 12,
color: '#757575',
},
trackHeight: trackHeight
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.Gantt(container);
chart.draw(data, options);
},
packages:['gantt']
});<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>这篇关于Google Gantt图表高度检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
