Visualisation: graphique à barres (image)

Important : La section "Graphiques d'images" des outils Google Charts est officiellement obsolète depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.

  1. Présentation
  2. Exemple
  3. Loading
  4. Format des données
  5. Options de configuration
  6. Méthodes
  7. Événements
  8. Règles concernant les données

Présentation

Graphique à barres affiché en tant qu'image à l'aide de l'API Google Charts.

Exemple

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Chargement...

Le nom du package google.charts.load est "imagebarchart" 

  google.charts.load("current", {packages: [[]"imagebarchart"]});

Le nom de classe de la visualisation est google.visualization.ImageBarChart 

  var visualization = new google.visualization.ImageBarChart(container);

Format des données

La première colonne doit contenir une chaîne contenant le libellé de la catégorie. Le nombre de colonnes que vous indiquez doit être numérique. Chaque colonne s'affiche sous la forme d'un ensemble de barres. Lorsque la table de données contient plusieurs colonnes numériques, les valeurs d'une ligne sont affichées sous forme de barres empilées.

Options de configuration

Nom Type Par défaut Description
backgroundColor chaîne "#FFFFFF" (blanc) Couleur d'arrière-plan du graphique, au format de couleur de l'API Chart.
couleurs Tableau<chaîne> Automatique Utilisez cette option pour attribuer des couleurs spécifiques à chaque série de données. Les couleurs sont spécifiées dans le format de couleur de l'API de création de graphiques. La couleur i est utilisée pour la colonne de données i, qui s'affiche au début si le nombre de colonnes de données est supérieur au nombre de couleurs. Si des variantes d'une seule couleur sont acceptables pour toutes les séries, utilisez plutôt l'option color.
enableEvents booléen false Permet aux graphiques de déclencher des événements déclenchés par l'utilisateur, comme un clic ou un survol avec la souris. Compatible uniquement avec certains types de graphiques. Consultez la section Événements ci-dessous.
hauteur number (nombre) Hauteur du conteneur Hauteur du graphique en pixels.
empilé booléen true Détermine si plusieurs colonnes de données sont affichées empilées (et non groupées).
IsVertical booléen false Détermine si les barres sont verticales.
légende chaîne 'droite' Position et type de légende. Voici les différents états possibles :
  • "right" : à droite du graphique.
  • "left" : à gauche du graphique.
  • "top" : au-dessus du graphique.
  • "bottom" : en dessous du graphique.
  • "none" : aucune légende ne s'affiche.
max number (nombre) Prétraitement automatique Valeur maximale à afficher sur l'axe Y.
min number (nombre) Prétraitement automatique Valeur minimale à afficher sur l'axe Y.
showCategoryLabels booléen true Si la valeur est "false", les libellés des catégories sont supprimés.
showValueLabels booléen true Si la valeur est définie sur "false", les libellés des valeurs sont supprimés.
title chaîne aucun titre Texte à afficher au-dessus du graphique.
valeurLabelsInterval number (nombre) Automatique Intervalle auquel afficher les libellés de l'axe des valeurs. Par exemple, si min est égal à 0, que max est égal à 100 et que valueLabelsInterval est égal à 20, le graphique affiche les libellés d'axe à (0, 20, 40, 60, 80 100).
largeur number (nombre) Largeur du conteneur Largeur du graphique en pixels.

Méthodes

Méthode Type renvoyé Description
draw(data, options) none Dessine le graphique.

Événements

Vous pouvez vous inscrire pour écouter les événements décrits sur la page Graphique d'images génériques.

Règles relatives aux données

Veuillez consulter les Règles de journalisation de l'API Chart.