Google-Diagramme hAchse Rasterlinien bei Monaten

Question

Ich habe ein Problem mit LineChart - ich habe meine Diagramm Datum Werte von Mitte April bis Mitte Juni und ich möchte hAxis Rasterlinien zeigen nur Grenzen zwischen Monaten aus meinen Daten.

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) 
     ] 
    } 

Aber ich will es meine Daten getroffen werden automatisch passend: Manuell habe ich es auf diese Weise gemacht. Jeder kann helfen?

Answer 1

lesen die Daten vor, um das Diagramm zeichnen,
und sammeln die Zecken Sie

im folgenden Arbeits Snippet angezeigt werden müssen,
den ersten Tag eines jeden Monats gefunden, zu tickMarks hinzugefügt wird

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>