Comment déplacer les valeurs de vAxis au milieu des blocs

Question

J'ai mon graphique googleCombot ici et je veux que mes valeurs de vAxis (axe vertical [0,1,2,3,4,5,6]) se trouvent au milieu sur des blocs à la place de s'asseoir sur les lignes. comment puis-je y arriver et obtenir mes valeurs pour rester à portée?

Ceci est le résultat veulent atteindre

Voici mon violon

function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'x'); 
 
    data.addColumn('number', 'y'); 
 
    data.addColumn('number', 'color band 1'); 
 
    data.addColumn('number', 'color band 2'); 
 
    data.addColumn('number', 'color band 3'); 
 
    data.addColumn('number', 'color band 4'); 
 
    data.addColumn('number', 'color band 5'); 
 
    
 
    var vticks = []; 
 
    var weight = [1,3,2,7,4,6]; 
 
    var hticks = []; 
 
    var i; 
 
    for(var i = 0; i< weight.length; i++){ 
 
     hticks.push(i+1); 
 
    } 
 
    var vticksMin = vticks[0]; 
 
    var vticksMax = vticks[vticks.length - 1]; 
 
    var br = 1, by = 1, ty = 1, tr = 1, mg = 3; 
 
    for (i = 0; i < 7; i++){ 
 
     vticks.push(i); 
 
    } 
 
\t 
 
    for (var i = 1; i < weight.length+1; i++) { 
 
    
 
     data.addRow([i, parseInt(weight[i-1]), br, by,mg,ty,tr]); 
 
    } 
 

 
\t var view = new google.visualization.DataView(data); 
 
\t view.setColumns([0,1, { 
 
\t \t type: 'string', 
 
\t \t role: 'annotation', 
 
\t \t calc: function (dt, row) { 
 
\t \t \t return dt.getValue(row, 1).toString(); 
 
\t \t } 
 
\t }, 2, 3,4, 5,6]); 
 
    
 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 
    
 
    chart.draw(view, { 
 
     height: 700, 
 
     width: 900, 
 
     isStacked: true, 
 
     hAxis: { 
 
\t    ticks: hticks 
 
     }, 
 
     vAxis: { 
 
\t    viewWindow: { 
 
\t     min: vticksMin, 
 
\t     max: vticksMax 
 
\t    }, 
 
\t    ticks: vticks 
 
     }, 
 
     series: { 
 
      0: { 
 
       type: 'line', 
 
    \t \t \t color: '#000' 
 
      }, 
 
      1: { 
 
    \t \t \t areaOpacity: 0.75, 
 
    \t \t \t color: '#E91818', 
 
       lineWidth: 0, 
 
       type: 'area', 
 
       visibleInLegend: false, 
 
       enableInteractivity: false 
 
      }, 
 
      2: { 
 
    \t \t \t areaOpacity: 0.7, 
 
    \t \t \t color: '#FFD91E', 
 
       lineWidth: 0, 
 
       type: 'area', 
 
       visibleInLegend: false, 
 
       enableInteractivity: false 
 
      }, 
 
      3: { 
 
    \t \t \t areaOpacity: 0.7, 
 
    \t \t \t color: '#00D717', 
 
       lineWidth: 0, 
 
       type: 'area', 
 
       visibleInLegend: false, 
 
       enableInteractivity: false 
 
      }, 
 
      4: { 
 
    \t \t \t areaOpacity: 0.7, 
 
    \t \t \t color: '#FFD91E', 
 
       lineWidth: 0, 
 
       type: 'area', 
 
       visibleInLegend: false, 
 
       enableInteractivity: false 
 
      }, 
 
      5: { 
 
    \t \t \t areaOpacity: 0.75, 
 
    \t \t \t color: '#E91818', 
 
       lineWidth: 0, 
 
       type: 'area', 
 
       visibleInLegend: false, 
 
       enableInteractivity: false 
 
      } 
 
     } 
 
    }); 
 
} 
 

 

 
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div> 
 
<div id="creativeCommons" style="text-align: center; width: 400px;"> 
 
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to add colored horizontal bands as a chart background</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Jonathan Ngbonga</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>. 
 
</div>

Answer 1

définir la couleur des quadrillages principaux à la transparence ...

gridlines: { 
    color: 'transparent', 
}, 

et ajouter 1 gridline mineur entre chaque grande ...

minorGridlines: { 
    color: 'black', 
    count: 1 
}, 

voir ci-dessous extrait de travail ...

function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'x'); 
 
    data.addColumn('number', 'y'); 
 
    data.addColumn('number', 'color band 1'); 
 
    data.addColumn('number', 'color band 2'); 
 
    data.addColumn('number', 'color band 3'); 
 
    data.addColumn('number', 'color band 4'); 
 
    data.addColumn('number', 'color band 5'); 
 

 
    var vticks = []; 
 
    var weight = [1,3,2,7,4,6]; 
 
    var hticks = []; 
 
    var i; 
 
    for(var i = 0; i< weight.length; i++){ 
 
    hticks.push(i+1); 
 
    } 
 
    var br = 1, by = 1, ty = 1, tr = 1, mg = 3; 
 
    for (i = 0; i < 7; i++){ 
 
    vticks.push(i); 
 
    } 
 
    var vticksMin = vticks[0]; 
 
    var vticksMax = vticks[vticks.length - 1]; 
 

 
    for (var i = 1; i < weight.length+1; i++) { 
 
    data.addRow([i, parseInt(weight[i-1]), br, by,mg,ty,tr]); 
 
    } 
 

 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0,1, { 
 
    type: 'string', 
 
    role: 'annotation', 
 
    calc: function (dt, row) { 
 
     return dt.getValue(row, 1).toString(); 
 
    } 
 
    }, 2, 3,4, 5,6]); 
 

 
    var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
 

 
    chart.draw(view, { 
 
    height: 700, 
 
    width: 900, 
 
    isStacked: true, 
 
    hAxis: { 
 
     ticks: hticks 
 
    }, 
 
    vAxis: { 
 
     minorGridlines: { 
 
     color: 'black', 
 
     count: 1 
 
     }, 
 
     gridlines: { 
 
     color: 'transparent', 
 
     }, 
 
     viewWindow: { 
 
     min: vticksMin, 
 
     max: vticksMax 
 
     }, 
 
     ticks: vticks 
 
    }, 
 
    series: { 
 
     0: { 
 
     type: 'line', 
 
     color: '#000' 
 
     }, 
 
     1: { 
 
     areaOpacity: 0.75, 
 
     color: '#E91818', 
 
     lineWidth: 0, 
 
     type: 'area', 
 
     visibleInLegend: false, 
 
     enableInteractivity: false 
 
     }, 
 
     2: { 
 
     areaOpacity: 0.7, 
 
     color: '#FFD91E', 
 
     lineWidth: 0, 
 
     type: 'area', 
 
     visibleInLegend: false, 
 
     enableInteractivity: false 
 
     }, 
 
     3: { 
 
     areaOpacity: 0.7, 
 
     color: '#00D717', 
 
     lineWidth: 0, 
 
     type: 'area', 
 
     visibleInLegend: false, 
 
     enableInteractivity: false 
 
     }, 
 
     4: { 
 
     areaOpacity: 0.7, 
 
     color: '#FFD91E', 
 
     lineWidth: 0, 
 
     type: 'area', 
 
     visibleInLegend: false, 
 
     enableInteractivity: false 
 
     }, 
 
     5: { 
 
     areaOpacity: 0.75, 
 
     color: '#E91818', 
 
     lineWidth: 0, 
 
     type: 'area', 
 
     visibleInLegend: false, 
 
     enableInteractivity: false 
 
     } 
 
    } 
 
    }); 
 
} 
 
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div> 
 
<div id="creativeCommons" style="text-align: center; width: 400px;"> 
 
    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">Code to add colored horizontal bands as a chart background</span> by <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Jonathan Ngbonga</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/deed.en_US">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>. 
 
</div>

Note: nécessité de déplacer les lignes pour vticksMin et vticksMax

ils utilisent vticks avant vticks est chargé ...