2017-01-03 10 views
1

Googleガントチャートでは高さを正しく表示できないため、低解像度ではグラフにすべてのデータが表示されません。垂直スクロールバー。Googleガントチャートの高さ検出

Code example

  • 最大のブラウザで開き、それ(あなたの解像度に応じて、あなたは完全なラインが表示されます)が小さくリサイズブラウザで
  • オープンそれ、あなたはグラフが生成されません表示されますスクロールバーを削除します。

    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のタイムラインチャートを使用して、必要なときには、垂直バーが表示されます。

ご意見をお寄せください。ありがとう。代わりに、画面サイズにグラフの高さを設定するので

+0

私は同じ状況にあった。 – zamebit

答えて

2

は、

は作業スニペット以下を参照してください

height: data.getNumberOfRows() * trackHeight

...として全体の高さを特定trackHeight

を設定してみてくださいスクロールバーはこのアプローチで表示されるようです...

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>

+0

本当に助けて!ありがとう – Khrys

+0

それを見てみましょう! – zamebit

関連する問題