如何設置google圖表中的hAxis文本數量？

Question

我正在繪製日期類型爲hAxis的折線圖。 繪製具有許多行（數據）的小圖表使hAxis文本爲'...'。我現在不能顯式顯示hAxis文本。 我該如何解決這個問題？

Answer 1

當有許多數據文本變得傾斜

減少chartArea.height提供足夠的空間來顯示標籤

chartArea.left可能需要調整好，充分顯示第一個標籤

請參閱以下工作片段...

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>