Javascript 谷歌甘特图高度检测

我面临的情况是，谷歌甘特图无法正确地呈现高度，因此在低分辨率下，我无法看到图表中的所有数据，因为它不显示垂直滚动条

• 在浏览器最大化的情况下打开它（根据您的分辨率，您将看到完整的行）
• 在浏览器调整大小、缩小的情况下打开它，您将看到图表不会生成滚动条，而是剪切线条

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

我还使用谷歌时间线图，它会在需要时显示竖线

---

如有任何建议，将不胜感激。谢谢。

不用将图表的高度设置为屏幕大小

尝试设置特定的

轨道高度

总高度为

height:data.getNumberOfRows（）*trackHeight

请参阅下面的工作片段，滚动条似乎以这种方式出现

google.charts.load（'current'{
回调：函数（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Task ID'）；
data.addColumn（'string'，'Task Name'）；
data.addColumn（'string'，'Resource'）；
data.addColumn（“日期”、“开始日期”）；
data.addColumn（“日期”、“结束日期”）；
data.addColumn（'number'，'Duration'）；
data.addColumn（'number'，'Percent done'）；
data.addColumn（'string'，'Dependencies'）；
data.addRows([
['C300300（M，AeX）'，'C300300（M，AeX）'，'DD'，新日期（2015年3月20日），新日期（2016年8月30日），空，117.96，空]，
['C671925（M，XeR）'，'C671925（M，XeR）'，'DD'，新日期（2016年2月16日），新日期（2016年11月16日），空，106.55，空]，
['C769868（M，YeB）'，'C769868（M，YeB）'，'DD'，新日期（2016年5月7日），新日期（2017年3月30日），空，64.22，空]，
['C678421（M，XeR）'，'C678421（M，XeR）'，'DD'，新日期（2016年2月22日），新日期（），空，153.21，空]，
['C678428（M，YeB）'，'C678428（M，YeB）'，'DD'，新日期（2016年9月3日），新日期（2017年0月31日），空，76.67，空]，
['C772279（M，YeB）'，'C772279（M，YeB）'，'DD'，新日期（2016年5月1日），新日期（2016年9月31日），空，142.11，空]，
['C769877（M，YeB）'，'C769877（M，YeB）'，'DD'，新日期（2016年9月3日），新日期（2017年2月31日），空，51.4，空]，
['C800305（M，XeR）'，'C800305（M，XeR）'，'DD'，新日期（2016年5月28日），新日期（2017年0月31日），空，87.1，空]，
['C774664（M，XeR）'，'C774664（M，XeR）'，'DD'，新日期（2016年6月11日），新日期（），空，123.94，空]，
['C803552（M，XeR）'，'C803552（M，XeR）'，'DD'，新日期（2016年6月18日），新日期（2016年9月14日），空，192.05，空]，
['C803555（M，XeR）'，'C803555（M，XeR）'，'DD'，新日期（2016年8月5日），新日期（2017年3月30日），空，50.63，空]，
['C843561（M，AeX）'，'C843561（M，AeX）'，'DD'，新日期（2016年8月16日），新日期（2016年11月6日），空，134.57，空]，
['C840916（M，XeR）'，'C840916（M，XeR）'，'DD'，新日期（2016年7月2日），新日期（2017年1月3日），空，83.24，空]，
['C867128（A，yesb）'，'C867128（A，yesb）'，'DD'，新日期（2016年10月14日），新日期（2017年2月1日），空，46.73，空]，
['C850076（M，YeB）'，'C850076（M，YeB）'，'DD'，新日期（2016年8月16日），新日期（2017年1月28日），无效，66.06，无效]，
['C887165（M，XeR）'，'C887165（M，XeR）'，'DD'，新日期（2016年8月13日），新日期（2017年1月28日），空，66.67，空]，
['C907859（M，YeB）'，'C907859（M，YeB）'，'DD'，新日期（2016年8月20日），新日期（2017年1月28日），空，65.22，空]，
['C904155（L，YeB）'，'C904155（L，YeB）'，'DD'，新日期（2016年11月28日），新日期（2017年0月20日），空，26.09，空]，
['C769875（M，YeB）'，'C769875（M，YeB）'，'DD'，新日期（2016年10月21日），新日期（2017年0月31日），空，60.56，空]，
['C1034751（L，YeB）'，'C1034751（L，YeB）'，'DD'，新日期（2016,10,30），新日期（2017,0,27），空，58.62，空]
]);
var轨高=40；
变量选项={
高度：data.getNumberOfRows（）*轨迹高度，
宽度：“100%”，
哈克斯：{
文本样式：{
fontName:[“机器人浓缩规则”]
}
},
甘特图：{
标签样式：{
fontName:[“RobotoCondencedRegular”]，
尺寸：12，
颜色：'#7575'，
},
trackHeight：trackHeight
}
};
var container=document.getElementById（'chart_div'）；
var chart=newgoogle.visualization.Gantt（容器）；
图表绘制（数据、选项）；
},
软件包：[“甘特”]
});

真的很有帮助！谢谢，我们来看看！我也处于同样的情况。