Google 차트의 날짜 지정 레이블 hAxis

Question

Google 차트 열 차트의 hAxis에 날짜 값을 사용하면 레이블이 바 그룹 구분선 아래에 표시됩니다 (아래 그림 참조). 문자열을 사용하면 이런 일이 발생하지 않습니다. 날짜 표시 줄을 각 막대 그룹 아래 가운데에 표시하는 방법을 알고있는 사람이 있습니까?

Answer 1

당신은

var ticks = []; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 
    ticks.push(data.getValue(i, 0)); 
} 

다음 옵션에서 지정 ... 당신의 hAxis 옵션에 대한 자신의 ticks ...

각 틱/레이블의 데이터에서 날짜를 사용하여 제공 할 수 있습니다 ...

hAxis: { 
    ticks: ticks 
}, 

... 작업 조각 다음을 참조

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'x'); 
 
    data.addColumn('number', 'y0'); 
 
    data.addColumn('number', 'y1'); 
 
    data.addRows([ 
 
    [new Date(2017, 07, 08), 200, 210], 
 
    [new Date(2017, 07, 15), 190, 220], 
 
    [new Date(2017, 07, 22), 205, 200] 
 
    ]); 
 

 
    var ticks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     ticks.push(data.getValue(i, 0)); 
 
    } 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(data, { 
 
    chartArea: { 
 
     bottom: 24, 
 
     height: '100%', 
 
     left: 48, 
 
     right: 96, 
 
     top: 24, 
 
     width: '100%' 
 
    }, 
 
    hAxis: { 
 
     ticks: ticks 
 
    }, 
 
    height: '100%', 
 
    title: 'Title', 
 
    width: '100%' 
 
    }); 
 
});

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