Graphiques Google Définition de vAxis sur 0,25 Intervalles

Question

Mes données seront toujours à des intervalles de 0,25 sur un graphique linéaire. Je n'aurai jamais un point tel que 100.14. Ce sera toujours des nombres tels que 100, 100.25, 100.75, 500, 680.50

Mais quand les diagrammes sont dessinés tous à souvent j'obtiens des nombres vAxis tels que 1.1 ou 2.4 quand ces valeurs ne pourraient jamais être un "point" sur le graphique . Je voudrais montrer SEULEMENT des multiples de 0.25 ... ou montrer SEULEMENT des points réels sur vAx n'est pas des points de "remplissage" entre deux points.

J'ai actuellement ces options

var options = {"title":"#{chart_title}", 
       "colors":["#0088cc"], 
       "titleTextStyle": { 
        color: "#0088cc",  
        fontName: "Verdana", 
        fontSize: 24, 
        bold: true,  
        italic: false 
        }, 
        "hAxis": { 
          "textStyle": { 
           "fontSize": 14, 
           bold: true 
          } 

          }, 
        "vAxis": { 
          "textStyle": { 
           "fontSize": 18, 
           bold: true 
          } 

          }   

       }; 

Est-il possible de forcer les cartes Google à montrer toujours des multiples de 0,25 sur Vaxis?

OU même le vAxis n'a besoin que d'étiquettes pour les points réels sur le graphique linéaire. Est-ce possible?

Answer 1

vous pouvez utiliser l'option vAxis.ticks pour définir les étiquettes des axes spécifiques ...

vAxis: { 
    ticks: [0, 0.25, 0.50, 0.75, 1, ...] 
} 

pour construire dynamiquement les étiquettes, utilisez la méthode getColumnRange sur la table de données,

var dataRange = data.getColumnRange(1); 

qui renvoie une objet avec des propriétés pour min et max

utiliser les valeurs pour construire ticks ar ray ...

var vTicks = []; 
for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval) { 
    vTicks.push(i); 
} 

(ajouter interval-max pour permettre un peu de place en haut)

---

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('number', 'x'); 
 
    data.addColumn('number', 'y'); 
 
    data.addRows([ 
 
     [0, 0], 
 
     [1, 0.25], 
 
     [2, 1.25], 
 
     [3, 2.75], 
 
     [4, 3.50], 
 
     [5, 2.25], 
 
     [6, 1.75], 
 
     [7, 0.50] 
 
    ]); 
 

 
    var interval = 0.25; 
 
    var dataRange = data.getColumnRange(1); 
 

 
    var vTicks = []; 
 
    for (var i = dataRange.min; i <= dataRange.max + interval; i = i + interval) { 
 
     vTicks.push(i); 
 
    } 
 

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

 
    var options = { 
 
     chartArea: { 
 
     top: 12, 
 
     right: 12, 
 
     bottom: 48, 
 
     left: 48, 
 
     height: '100%', 
 
     width: '100%' 
 
     }, 
 
     height: 800, 
 
     legend: { 
 
     position: 'bottom' 
 
     }, 
 
     vAxis: { 
 
     ticks: vTicks 
 
     } 
 
    }; 
 

 
    drawChart(); 
 
    window.addEventListener('resize', drawChart, false); 
 
    function drawChart() { 
 
     chart.draw(data, options); 
 
    } 
 
    }, 
 
    packages:['corechart', 'table'] 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>