Графики Google hAxis сетки в месяцах

Question

У меня проблема с LineChart. У меня есть значения даты в графике с середины апреля до середины июня, и я хочу, чтобы линии сетки hAxis отображали только границы между месяцами из моих данных. В ручном режиме я делал это так:

hAxis: { 
     textStyle: { fontSize: 10, color: '#999999' }, 
     gridlines:{ color: '#eee' }, 
     textPosition: 'in', 
     baselineColor: '#eee', 
     format: 'M', 
     ticks: [ 
     new Date(2016, 4, 1), 
     new Date(2016, 5, 1), 
     new Date(2016, 6, 1) 
     ] 
    } 

Но я хочу, чтобы это было автоматически настроено на мои данные. Кто-нибудь может помочь?

Answer 1

читать данные до рисования диаграммы,
и собирать клещи нужно отображаться

в следующем рабочем фрагменте кода,
в первый день, в каждом месяц нашел, добавляется tickMarks

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', '2015'); 
 
    data.addColumn('number', '2016'); 
 
    data.addRows([ 
 
     [new Date('04/20/2016'), 200, 210], 
 
     [new Date('04/30/2016'), 190, 220], 
 
     [new Date('05/06/2016'), 205, 200], 
 
     [new Date('05/18/2016'), 220, 230], 
 
     [new Date('05/24/2016'), 212, 210], 
 
     [new Date('06/01/2016'), 185, 193], 
 
     [new Date('06/16/2016'), 196, 207] 
 
    ]); 
 

 
    var tickMarks = []; 
 
    var curMonth = -1; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     var testDate = data.getValue(i, 0); 
 
     if (testDate.getMonth() > curMonth) { 
 
     curMonth = testDate.getMonth(); 
 
     tickMarks.push(new Date(testDate.getFullYear(), testDate.getMonth(), 1)); 
 
     } 
 
    } 
 

 
    var options = { 
 
     height: 400, 
 
     hAxis: { 
 
     textStyle: { fontSize: 10, color: '#999999' }, 
 
     gridlines:{ color: '#eee' }, 
 
     textPosition: 'in', 
 
     baselineColor: '#eee', 
 
     format: 'M', 
 
     ticks: tickMarks 
 
     } 
 
    }; 
 

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

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