Visualisation: Graphique à barres (ancienne version)

Obsolète

Cette visualisation a été remplacée par une nouvelle version. Utilisez-la à la place. Pour faciliter la migration, reportez-vous aux notes de version.

  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 horizontales affiché dans le navigateur au format SVG ou VML. Affiche des conseils lorsque vous cliquez sur des points. Permet d'animer les lignes lorsque l'utilisateur clique sur les entrées de la légende. Pour obtenir une version verticale de ce graphique, consultez le graphique à colonnes.

Par: Google

Exemple

Codez vous-même la programmation dans Visualization Playground.

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["barchart"]});
      google.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.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Chargement...

Le nom du package google.load est "barchart" 

  google.load("visualization", "1", {packages: ["barchart"]});

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

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

Format des données

Chaque ligne du tableau représente un groupe de barres adjacentes.

La première colonne du tableau doit contenir une chaîne représentant le libellé de ce groupe de barres. N'importe quel nombre de colonnes peut être numérique. Chacune de ces barres représente la même couleur et une même position relative dans chaque groupe.

La valeur d'une ligne et d'une colonne donnée contrôle la hauteur de la barre unique représentée par cette ligne et cette colonne.

Options de configuration

Nom Type Par défaut Description
Couleur de l'axe chaîne ou objet couleur par défaut Couleur de l'axe. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
Couleur de l'arrière-plan de l'axe chaîne ou objet couleur par défaut Bordure autour de l'arrière-plan de l'axe. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
AxeFontSize number (nombre) Prétraitement automatique Taille de police du texte de l'axe du graphique, en pixels.
backgroundColor chaîne ou objet couleur par défaut Couleur d'arrière-plan de la zone principale du graphique. Voici les options possibles :
  • Chaîne compatible avec le code HTML (par exemple, "rouge" ou "#00cc00")
  • Un objet avec les propriétés stroke fill et strokeSize. Les valeurs stroke et fill doivent être des chaînes de couleur. La valeur "strokeSize" est un nombre. Exemple : {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Pour utiliser uniquement le remplissage, sans trait, utilisez stroke:null, strokeSize: 0.
Couleur de bordure chaîne ou objet couleur par défaut Bordure autour des éléments du graphique. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
couleurs Tableau de chaînes ou d'objets Couleurs par défaut

Tableau de couleurs, où chaque élément spécifie la couleur d'une série. Vous devez spécifier un élément de tableau pour chaque série.

  • Si la valeur est is3D=false, il s'agit d'un tableau de couleurs HTML. Exemple : couleurs:['#00FF00','orange']
  • Si la valeur est is3D=true, il s'agit d'un tableau de couleurs HTML ou d'objets de ce type: {color:face_color, darker:shade_color}, où color correspond à la couleur du visage de l'élément et darker à la couleur de la nuance. Toutefois, si vous spécifiez une couleur HTML pour un objet 3D, la face et la nuance seront de la même couleur, et l'effet 3D sera réduit. Exemple : {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
activer l'info-bulle booléen true Si ce paramètre est défini sur "true", les info-bulles s'affichent lorsque l'utilisateur clique sur une barre.
Couleur de la bordure de mise au point chaîne ou objet couleur par défaut Bordure autour des éléments du graphique qui sont mis en surbrillance (pointés par la souris). Les valeurs possibles sont celles de l'option de configuration backgroundColor.
hauteur number (nombre) Hauteur du conteneur Hauteur du graphique en pixels.
is3D booléen false Si ce paramètre est défini sur "true", affiche une modification en trois dimensions.
empilé booléen false Si ce paramètre est défini sur "true", les valeurs de ligne sont empilées (accumulées).
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.
légendeArrière-planCouleur chaîne ou objet couleur par défaut Couleur d'arrière-plan de la zone de légende du graphique. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
Taille de police de la légende number (nombre) Prétraitement automatique Taille de la police de la légende, en pixels.
légendeTexteColor chaîne ou objet couleur par défaut Couleur du texte de la légende. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
Échelle logarithmique booléen false Si la valeur est "true", l'axe principal doit être mis à l'échelle de manière logarithmique.
max number (nombre) Prétraitement automatique Indique la ligne de grille la plus haute de l'axe Y. La ligne réelle de la grille correspondra à la valeur la plus élevée parmi les deux suivantes : la valeur maximale de l'option, ou la valeur de données la plus élevée, arrondie à la prochaine marque de grille supérieure :
min number (nombre) Prétraitement automatique Spécifie la ligne de la grille de l'axe Y la plus basse. La ligne réelle de la grille correspond à la valeur la plus basse de deux valeurs: la valeur d'option minimale, ou la valeur de données la plus basse, arrondie à la marque inférieure inférieure suivante.
axe inversé booléen true Si la valeur est définie sur "true" (valeur par défaut), les catégories sont tracées de haut en bas. Si la valeur est "false", les barres sont dessinées de bas en haut.
Afficher les catégories booléen true Si la valeur est "true", les libellés des catégories s'affichent. Si la valeur est "false", ce n'est pas le cas.
title chaîne aucun titre Texte à afficher au-dessus du graphique.
titre X chaîne aucun titre Texte à afficher sous l'axe horizontal.
titreY chaîne aucun titre Texte à afficher par l'axe vertical.
titreCouleur chaîne ou objet couleur par défaut Couleur du titre du graphique. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
titreFontSize number (nombre) Prétraitement automatique Taille de la police du titre du graphique, en pixels.

tooltipFontSize		 number (nombre) 11 Taille de police du texte de l'info-bulle. Cette valeur peut être réduite si l'info-bulle est trop petite pour contenir le texte dans la police spécifiée.
tooltipHeight
 number (nombre) 60 Hauteur de l'info-bulle, en pixels. La hauteur de l'info-bulle est fixe. Elle ne sera ni agrandie, ni réduite en fonction de la longueur ou de la taille de la police du texte. En revanche, toute taille supérieure au tiers de la hauteur du graphique sera recadrée.
tooltipWidth number (nombre) 120 Largeur de l'info-bulle, en pixels. La largeur de l'info-bulle est fixe. Elle ne sera ni agrandie, ni réduite en fonction de la longueur ou de la taille de la police du texte. Toutefois, tout élément supérieur à la largeur du graphique sera recadré.
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.
getSelection() Tableau d'éléments de sélection Implémentation getSelection() standard. Les éléments sélectionnés sont des éléments de colonne et de cellule. L'utilisateur ne peut sélectionner qu'une seule colonne ou cellule à la fois.
setSelection() none Implémentation standard de setSelection(), mais ne permet de sélectionner qu'un seul élément Traite chaque entrée de sélection comme une sélection de colonne ou de cellule. Notez que vous ne pouvez pas sélectionner la colonne de libellé.

Événements

Nom Description Propriétés
onmouseover Déclenché lorsque l'utilisateur passe la souris sur une barre, et transmet les index de ligne et de colonne de la cellule correspondante. ligne, colonne
onmouseout Déclenché lorsque l'utilisateur fait passer le curseur de sa souris à partir d'une barre, et transmet les index de ligne et de colonne de la cellule correspondante. ligne, colonne
ready Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode draw et les appeler uniquement après le déclenchement de l'événement. Aucune
select Déclenché lorsque l'utilisateur clique sur une barre ou une légende Lorsqu'une barre est sélectionnée, la cellule correspondante dans le tableau de données est sélectionnée. Lorsqu'une légende est sélectionnée, la colonne correspondante dans le tableau de données est sélectionnée. Pour savoir ce qui a été sélectionné, appelez getSelection(). Aucune

Règles relatives aux données

L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.