Google 차트 - hAxis의 다른 형식

Question

간단한 Google 차트에서 hAxis 형식에 문제가 있습니다. 내 옵션 VAR에서 :

var dataTable = new google.visualization.DataTable(); 
dataTable.addColumn('date', 'X'); 
dataTable.addColumn('number', 'Value')); 
var values = []; 
values.push([new Date(date), 10]); 

내가이 google chart hAxis를 얻을 :

'hAxis': { 
    baseline: minDate, 
    format: 'dd/MM' 
}, 

내 values 배열을 입력합니다.

각 월요일을 "월요일 06/02"와 같이 차트에 표시하고 싶습니다. 다른 날은 다음과 같이 표시됩니다.

17/01 ---- 21/01 ----- 25/01 ----- 29/01 --- 02/02 ---- Monday 06/02 

이 기능을 사용할 수 있습니까? 사용자 정의 축를 제공하기 위해

Answer 1

사용 hAxis.ticks은 ...

다음 작업 조각이 월요일에서 시작, 매 7 일마다 레이블을 추가 레이블

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart(); 
 
    window.addEventListener('resize', drawChart, false); 
 
    }, 
 
    packages:['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var formatDate = new google.visualization.DateFormat({ 
 
    pattern: 'dd/MM' 
 
    }); 
 

 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn('date', 'X'); 
 
    dataTable.addColumn('number', 'Value'); 
 

 
    var oneDay = (1000 * 60 * 60 * 24); 
 
    var startDate = new Date(2017, 0, 16); 
 
    var endDate = new Date(); 
 
    var ticksAxisH = []; 
 
    for (var i = startDate.getTime(); i < endDate.getTime(); i = i + oneDay) { 
 
    // set x value 
 
    var rowDate = new Date(i); 
 
    var xValue = { 
 
     v: rowDate, 
 
     f: formatDate.formatValue(rowDate) 
 
    }; 
 

 
    // set y value (y = 2x + 8) 
 
    var yValue = (2 * ((i - startDate.getTime())/oneDay) + 8); 
 

 
    // add data row 
 
    dataTable.addRow([ 
 
     xValue, 
 
     yValue 
 
    ]); 
 

 
    // add tick every 7 days 
 
    if (((i - startDate.getTime()) % 7) === 0) { 
 
     ticksAxisH.push(xValue); 
 
    } 
 
    } 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.ColumnChart(container); 
 
    chart.draw(dataTable, { 
 
    hAxis: { 
 
     baseline: startDate, 
 
     format: 'dd/MM', 
 
     ticks: ticksAxisH 
 
    }, 
 
    legend: 'none' 
 
    }); 
 
}

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