GoogleグラフのhAxisテキストの数を設定するにはどうすればよいですか？

Question

日付型hAxisの折れ線グラフを描画しています。 多くの行（データ）を持つ小さな図を描画すると、hAxisのテキストが '...'になります。 hAxisテキストを明示的に表示することはできません。 この問題を解決するにはどうすればよいですか？

Answer 1

多くのデータががある場合、テキストは、傾斜

なっラベル

chartArea.leftを表示するのに十分なスペースを提供するために、chartArea.heightを減らす完全に表示するには、同様に調整する必要があります最初のラベル

次の作業スニペットを参照してください...

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {id: 'Date', type: 'date'}, 
 
     {id: 'A', type: 'number'}, 
 
     {id: 'B', type: 'number'}, 
 
     {id: 'C', type: 'number'}, 
 
     {id: 'D', type: 'number'} 
 
     ], 
 
     rows: [ 
 
     {c:[{v: new Date(2016, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 0}]}, 
 
     {c:[{v: new Date(2016, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 24}]}, 
 
     {c:[{v: new Date(2016, 2, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 20}]}, 
 
     {c:[{v: new Date(2016, 3, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 48}]}, 
 
     {c:[{v: new Date(2016, 4, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 53}]}, 
 
     {c:[{v: new Date(2016, 5, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 61}]}, 
 
     {c:[{v: new Date(2016, 6, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 63}]}, 
 
     {c:[{v: new Date(2016, 7, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 66}]}, 
 
     {c:[{v: new Date(2016, 8, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 70}]}, 
 
     {c:[{v: new Date(2016, 9, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 75}]}, 
 
     {c:[{v: new Date(2016, 10, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 78}]}, 
 
     {c:[{v: new Date(2016, 11, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 80}]}, 
 
     {c:[{v: new Date(2017, 0, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 85}]}, 
 
     {c:[{v: new Date(2017, 1, 1)}, {v: 25}, {v: 50}, {v: 25}, {v: 90}]} 
 
     ] 
 
    }); 
 

 
    var options = { 
 
     chartArea: { 
 
     left: 52, 
 
     height: '50%' 
 
     }, 
 
     hAxis: { 
 
     format: 'MMM dd, yyyy' 
 
     }, 
 
     height: 200, 
 
     legend: 'none', 
 
     title: 'Example', 
 
     width: 240 
 
    }; 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    chart.draw(dataTable, options); 
 
    }, 
 
    packages:['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>