nombre d'étiquettes sur l'axe horizontal dans Google Chartwrapper

Question

Dans Google Maps, l'instruction 'hAxis': {'gridlines': {'count': 3} } semble fonctionner, mais lorsque j'utilise chartWrapper dans le cadre d'un graphique interactif, ce n'est pas le cas. Je ne me soucie pas vraiment du quadrillage vertical, mais je veux contrôler combien d'étiquettes sont sur l'axe X. Je pense que les étiquettes sont généralement attachées au quadrillage - une étiquette par ligne de quadrillage.

J'ai un exemple sur le site Web de graphiques Google, où la seule chose que j'ai changé était de mettre essayer de mettre en 3 quadrillages:

https://jsfiddle.net/emorris/gLcq1h2j/

Answer 1

option graphique ticks est uniquement prise en charge par un continuous axis

dans le violon que vous partagiez, le view placé sur le graphique,
convertit la première colonne à partir du type 'date'-'string',
qui se traduit par un discrete axis

// Convert the first column from 'date' to 'string'. 
'view': { 
    'columns': [{ 
    'calc': function(dataTable, rowIndex) { 
     return dataTable.getFormattedValue(rowIndex, 0); 
    }, 
    'type': 'string' 
    }, 1, 2, 3, 4] 
} 

---

à contrôler le nombre d'étiquettes sont sur l'axe X, retirez le view

construire dynamiquement ici le ticks, utilisez le state du filtre de gamme ,
pour connaître la période actuellement affichée sur la carte

le tableau devra être redessinée quand 'statechange' événement se déclenche le contrôle

voir ci-dessous extrait de travail, une étiquette d'axe est créé pour tous les 5 jours ...

google.charts.load('current', { 
 
    callback: drawChartRangeFilter, 
 
    packages: ['corechart', 'controls'] 
 
}); 
 

 
function drawChartRangeFilter() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'Date'); 
 
    data.addColumn('number', 'Stock low'); 
 
    data.addColumn('number', 'Stock open'); 
 
    data.addColumn('number', 'Stock close'); 
 
    data.addColumn('number', 'Stock high'); 
 

 
    var open, close = 300; 
 
    var low, high; 
 
    for (var day = 1; day < 121; ++day) { 
 
    var change = (Math.sin(day/2.5 + Math.PI) + Math.sin(day/3) - Math.cos(day * 0.7)) * 150; 
 
    change = change >= 0 ? change + 10 : change - 10; 
 
    open = close; 
 
    close = Math.max(50, open + change); 
 
    low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15; 
 
    low = Math.max(0, low); 
 
    high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15; 
 
    var date = new Date(2012, 0, day); 
 
    data.addRow([date, Math.round(low), Math.round(open), Math.round(close), Math.round(high)]); 
 
    } 
 

 
    var dashboard = new google.visualization.Dashboard(
 
    document.getElementById('dashboard') 
 
); 
 

 
    var control = new google.visualization.ControlWrapper({ 
 
    controlType: 'ChartRangeFilter', 
 
    containerId: 'control', 
 
    options: { 
 
    filterColumnIndex: 0, 
 
    ui: { 
 
     chartType: 'LineChart', 
 
     chartOptions: { 
 
     chartArea: { 
 
      width: '92%' 
 
     }, 
 
     hAxis: { 
 
      baselineColor: 'none' 
 
     }, 
 
     height: 72 
 
     }, 
 
     chartView: { 
 
     columns: [0, 3] 
 
     }, 
 
     minRangeSize: 86400000 
 
    } 
 
    }, 
 
    state: { 
 
    range: { 
 
     start: new Date(2012, 1, 9), 
 
     end: new Date(2012, 2, 20) 
 
    } 
 
    } 
 
    }); 
 

 
    var chart = new google.visualization.ChartWrapper({ 
 
    chartType: 'CandlestickChart', 
 
    containerId: 'chart', 
 
    options: { 
 
     chartArea: { 
 
     height: '100%', 
 
     width: '100%', 
 
     top: 12, 
 
     left: 48, 
 
     bottom: 48, 
 
     right: 48 
 
     }, 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
      max: 2000 
 
     } 
 
     }, 
 
     legend: { 
 
     position: 'none' 
 
     } 
 
    } 
 
    }); 
 

 
    google.visualization.events.addListener(control, 'statechange', setAxisTicks); 
 

 
    function setAxisTicks() { 
 
    var oneDay = (1000 * 60 * 60 * 24); 
 
    var dateRange = control.getState().range; 
 
    var ticksAxisH = []; 
 
    for (var i = dateRange.start.getTime(); i <= dateRange.end.getTime(); i = i + (oneDay * 5)) { 
 
     ticksAxisH.push(new Date(i)); 
 
    } 
 
    if (ticksAxisH.length > 0) { 
 
     ticksAxisH.push(new Date(ticksAxisH[ticksAxisH.length - 1].getTime() + (oneDay * 5))); 
 
    } 
 
    chart.setOption('hAxis.ticks', ticksAxisH); 
 
    if (chart.getDataTable() !== null) { 
 
     chart.draw(); 
 
    } 
 
    } 
 
    setAxisTicks(); 
 

 
    dashboard.bind(control, chart); 
 
    drawDashboard(); 
 

 
    $(window).resize(drawDashboard); 
 

 
    function drawDashboard() { 
 
    dashboard.draw(data); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard"> 
 
    <div id="chart"></div> 
 
    <div id="control"></div> 
 
</div>