Personnaliser les axes

  1. Présentation
  2. Terminologie
  3. Discret ou continu
  4. Échelle d'axe
  5. Formats numériques

Présentation

Les dimensions des données s'affichent souvent sur des axes (horizontal et vertical). C'est le cas pour: Graphique en aires, Graphique à barres, Graphique en chandeliers, Graphique à colonnes, Graphique combiné, Graphique en courbes, Graphique en aires en escalier et Graphique à nuage de points.

Lorsque vous créez un graphique avec des axes, vous pouvez personnaliser certaines de ses propriétés:

  • Discret ou continu
  • Direction : vous pouvez personnaliser la direction à l'aide de l'option hAxis/vAxis.direction.
  • Positionnement et style des libellés : vous pouvez personnaliser le positionnement et le style des libellés à l'aide des options hAxis/vAxis.textPosition et hAxis/vAxis.textStyle.
  • Style et texte du titre de l'axe : vous pouvez personnaliser le texte et le style du titre de l'axe à l'aide des options hAxis/vAxis.title et hAxis/vAxis.titleTextStyle.
  • Échelle d'axe : vous pouvez définir l'échelle d'un axe sur une échelle logarithmique (log) à l'aide des options hAxis/vAxis.logScale ou hAxis/vAxis.scaleType.
  • Pour obtenir la liste complète des options de configuration des axes, consultez les options hAxis et vAxis dans la documentation de votre graphique.

Terminologie

Axe principal/mineur:

  • L'axe majeur est l'axe le long de l'orientation naturelle du graphique. Pour les graphiques en courbes, en aires, à colonnes, combinés, en escalier et en chandeliers japonais, il s'agit de l'axe horizontal. Pour un graphique à barres, il s'agit du graphique vertical. Les graphiques à nuage de points et à secteurs n'ont pas d'axe principal.
  • L'axe mineur est l'autre axe.

Axe discret/continue:

  • L'axe discrète comporte un nombre fini de valeurs espacées uniformément, appelées catégories.
  • L'axe continue a un nombre infini de valeurs possibles.

Discret ou continu

L'axe principal d'un graphique peut être discret ou continu. Lorsque vous utilisez un axe discret, les points de données de chaque série sont espacés uniformément sur l'axe, en fonction de l'index de ligne. Lorsque vous utilisez un axe continu, les points de données sont positionnés en fonction de leur valeur de domaine.

L'étiquetage est également différent. Sur un axe discret, les noms des catégories (spécifiés dans la colonne "domaine" des données) sont utilisés en tant qu'étiquettes. Sur un axe continu, les étiquettes sont générées automatiquement: le graphique affiche des lignes de grille espacées uniformément, où chaque ligne de libellé est étiquetée en fonction de la valeur qu'elle représente.

Les axes suivants sont toujours continus:

  • Les deux axes des graphiques à bulles.
  • Axe mineur.

Dans les graphiques en courbes, en aires, à barres, à colonnes et en chandeliers japonais (et aux graphiques combinés ne contenant que ces séries), vous pouvez contrôler le type d'axe principal:

  • Pour un axe discret, définissez le type de colonne de données sur string.
  • Pour un axe continu, définissez le type de colonne de données sur l'une des valeurs suivantes: number, date, datetime ou timeofday.
Discret / Continu Type de la première colonne Exemple
Discret chaîne
En continu number (nombre)
En continu date

Échelle d'axe

Vous pouvez définir l'échelle d'un axe à l'aide de l'option scaleType. Par exemple, pour définir l'échelle de l'axe vertical sur l'échelle logarithmique, utilisez l'option suivante:

  vAxis: {
        scaleType: 'log'
  }

Le graphique en courbes suivant montre la croissance de la population mondiale à l'échelle linéaire (standard) et logarithmique.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = 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: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

Lorsque vous utilisez un format qui utilise du texte (par exemple, le format long, qui affiche 8 000 000 d'impressions en "8 millions"), vous pouvez localiser les chaînes dans d'autres langues en spécifiant un code de langue lorsque vous chargez la bibliothèque Google Charts. Par exemple, pour remplacer "8 millions" en "8 миллиона" en russe, appelez la bibliothèque comme suit:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>