web-dev-qa-db-fra.com

définir la plage des axes x dans le graphique google

J'essaie de créer un graphique à barres en utilisant l'exemple de graphique Google

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Topping');

    data.addColumn('number', 'Slices');

    data.addRows([
      ['Mushrooms', 5],
      ['Onions', 4],
      ['Olives', 3]
      ['Zucchini', 2],
      ['Pepperoni', 1]
    ]);

Le graphique est créé avec succès mais sur l'axe X, il affiche une valeur de 0 à 6. Lorsque je passe toutes les valeurs à 0, il montre l'axe X de -1 à +1.

Est-il possible de définir l'axe X pour qu'il démarre toujours de 0% à 100%.

google-visualization
18
dmay

Vous pouvez forcer l'axe x d'un graphique à barres pour toujours afficher une certaine plage en définissant le hAxis.viewWindow.min et hAxis.viewWindow.max options:

hAxis: {
    viewWindow: {
        min: 0,
        max: 100
    },
    ticks: [0, 25, 50, 75, 100] // display labels every 25
}
43
asgallant

Définissez les valeurs tick:

vAxis: { 
         ticks: [{v:0, f:'0%'},{v:10, f:'10%'},{v:20, f:'20%'},{v:30, f:'30%'}]
}
3
Kailas

u peut définir l'axe x en modifiant la valeur de comptage que nous utilisons DataTable ()

var databmi = new google.visualization.DataTable ();

 data.addColumn('string', 'Country');
      data.addColumn('number', 'GDP');
      data.addRows([
        ['US', 16768100],
        ['China', 9181204],
        ['Japan', 4898532],
        ['Germany', 3730261],
        ['France', 2678455]
      ]);

     var options = {
       title: 'GDP of selected countries, in US $millions',
       width: 500,
       height: 300,
       legend: 'none',
       bar: {groupWidth: '95%'},
       vAxis: { 
             title :'your choice',
             gridlines: { count: 4 } 
              },
        hAxis: {
               title :'your choice',
                gridlines: {count: 4}
              }
     };
2
pratdev