Visualisation: Graphique à barres (image)

Important:La section "Graphiques d'images" de Google Outils de création de graphiques a été officiellement abandonnée depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.

  1. Overview
  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é sous forme d'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 être une chaîne et contenir l'étiquette de la catégorie. La ou les colonnes suivantes doivent toutes être numériques. Chaque colonne est affichée 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 dans le format de couleurs de l'API Chart
colors Tableau<chaîne> Auto 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 couleurs de l'API Chart. La couleur i est utilisée pour la colonne de données i, en encadrant le début jusqu'au début s'il y a plus de colonnes de données que de couleurs. Si les variantes d'une seule couleur sont acceptables pour toutes les séries, utilisez plutôt l'option color.
enableEvents boolean false Entraîne la génération d'événements déclenchés par l'utilisateur dans les graphiques, tels qu'un clic ou le survol de la souris. Compatible uniquement avec des types de graphiques spécifiques. Consultez la section Événements ci-dessous.
taille Nombre Hauteur du conteneur Hauteur du graphique en pixels.
isStacked boolean true Détermine si plusieurs colonnes de données seront affichées sous forme de barres empilées (par opposition aux barres groupées).
isVertical boolean false Détermine si les barres seront 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" : sous le graphique.
  • "none" : aucune légende ne s'affiche.
max Nombre automatique Valeur maximale à afficher sur l'axe Y.
min Nombre automatique Valeur minimale à afficher sur l'axe Y.
showCategoryLabels boolean true Si cette règle est définie sur "false", les étiquettes des catégories sont supprimées.
showValueLabels boolean true Si la valeur est définie sur "false", les étiquettes des valeurs sont supprimées.
titre chaîne sans titre Texte à afficher au-dessus du graphique.
valueLabelsInterval Nombre Auto Intervalle auquel afficher les libellés de l'axe des valeurs. Par exemple, si min correspond à 0, max à 100 et valueLabelsInterval à 20, le graphique affichera les libellés des axes (0, 20, 40, 60, 80 100).
largeur Nombre Largeur du conteneur Largeur du graphique en pixels.

Méthodes

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

Événements

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

Règles concernant les données

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