Cette page a été traduite par l'API Cloud Translation.

Visualisation: Graphique à colonnes (ancienne version)

Obsolète

Cette visualisation a été remplacée par une nouvelle version. Veuillez l'utiliser à la place. Pour faciliter la migration, veuillez consulter la page des notes de version.

Overview
Exemple
Loading
Format des données
Options de configuration
Méthodes
Événements
Règles concernant les données

Présentation

Graphique à barres verticales affiché dans le navigateur au format SVG ou VML. Affiche des conseils lorsque vous cliquez sur des points. Il anime les lignes lorsque vous cliquez sur les entrées de la légende. Pour obtenir une version horizontale de ce graphique, consultez le graphique à barres.

Par: Google

Exemple

Codez-le vous-même 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:["columnchart"]});
      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.ColumnChart(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 "columnchart"

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

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

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

Format des données

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

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

La valeur d'une ligne et d'une colonne données 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
axisColor	chaîne ou objet	couleur par défaut	Couleur de l'axe. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
axisBackgroundColor	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.
axisFontSize	Nombre	automatique	Taille de police du texte des axes du graphique (en pixels).
backgroundColor	chaîne ou objet	couleur par défaut	Couleur d'arrière-plan de la zone principale du graphique. Il peut s'agir de l'une des options suivantes : Chaîne dont la couleur est acceptée par le code HTML, par exemple "rouge" ou "#00cc00" Un objet avec les propriétés `stroke` `fill` et `strokeSize` `stroke` et `fill` doivent être une chaîne avec une couleur. Le traitSize est un nombre. Exemple : `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Pour n'utiliser que le remplissage, sans trait, utilisez `stroke:null, strokeSize: 0`.
borderColor	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.
colors	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 : colors:['#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 de face de l'élément et `darker` à la couleur de nuance. Toutefois, si vous spécifiez une couleur HTML pour un objet 3D, le visage et l'ombre 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'}]}`
enableTooltip	boolean	true	Si cette règle est définie sur "True", les info-bulles s'affichent lorsque l'utilisateur clique sur une colonne.
focusBorderColor	chaîne ou objet	couleur par défaut	Bordure autour des éléments actifs du graphique (pointés par la souris). Les valeurs possibles sont celles de l'option de configuration backgroundColor.
taille	Nombre	Hauteur du conteneur	Hauteur du graphique en pixels.
is3D	boolean	false	Si la valeur est définie sur "true", affiche une variation tridimensionnelle.
isStacked	boolean	false	Si elle est définie sur "true", les valeurs des lignes 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" : sous le graphique. "none" : aucune légende ne s'affiche.
legendBackgroundColor	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.
legendFontSize	Nombre	automatique	Taille de la police de la légende, en pixels.
legendTextColor	chaîne ou objet	couleur par défaut	Couleur des entrées de texte de la légende. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
logScale	boolean	false	Si la valeur est "true", l'axe principal doit être mis à l'échelle logarithmique.
max	Nombre	automatique	Spécifie la ligne de grille la plus élevée de l'axe Y. La ligne de grille réelle sera la valeur la plus élevée parmi les deux suivantes: la valeur d'option maximale ou la valeur de données la plus élevée, arrondie à la marque de grille suivante la plus haute.
min	Nombre	automatique	Spécifie la ligne de grille la plus basse de l'axe Y. La ligne de grille réelle sera la valeur la plus faible parmi les deux valeurs suivantes: la valeur d'option minimale, ou la valeur de données la plus basse, arrondie à la première marque de grille inférieure suivante .
reverseAxis	boolean	false	Si cette règle est définie sur "True", les catégories sont dessinées de droite à gauche. Par défaut, le tracé est de gauche à droite.
showCategories	boolean	true	Si la valeur est "true", les libellés de catégorie s'affichent. S'il est défini sur "false", il ne l'est pas.
titre	chaîne	sans titre	Texte à afficher au-dessus du graphique.
titleX	chaîne	sans titre	Texte à afficher sous l'axe horizontal.
titleY	chaîne	sans titre	Texte à afficher sur l'axe vertical.
titleColor	chaîne ou objet	couleur par défaut	Couleur du titre du graphique. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
titleFontSize	Nombre	automatique	Taille de la police du titre du graphique, en pixels.
tooltipFontSize	Nombre	11	Taille de police du texte de l'info-bulle. Cela peut être réduit si l'info-bulle est trop petite pour contenir le texte dans la police spécifiée.
tooltipHeight	Nombre	60	Hauteur de l'info-bulle (en pixels). La hauteur de l'info-bulle est fixe. Elle n'est jamais augmentée ni réduite pour s'adapter à la longueur ou à la taille de la police du texte. Toutefois, tout élément supérieur au tiers de la hauteur du graphique sera recadré.
tooltipWidth	Nombre	120	Largeur de l'info-bulle, en pixels. La largeur de l'info-bulle est fixe. Elle n'augmente ni ne rétrécit jamais pour s'adapter à la longueur ou à la taille de police du texte. Cependant, tout élément qui dépasse la largeur du graphique sera recadré.
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.
`getSelection()`	Tableau d'éléments de sélection	Implémentation standard de `getSelection()`. 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 n'accepte que la sélection d'un seul élément. Traite chaque entrée de sélection comme une sélection de colonne ou de cellule. Notez que la colonne d'étiquette ne peut pas être sélectionnée.

Événements

Nom	Description	Propriétés
`onmouseover`	Déclenché lorsque l'utilisateur pointe sur une barre et transmet les index de ligne et de colonne de la cellule correspondante.	ligne, colonne
`onmouseout`	Déclenché lorsque l'utilisateur éloigne le curseur de la souris 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 externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode `draw`, puis ne les appeler qu'après le déclenchement de l'événement.	Aucun
`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 la table de données est sélectionnée. Pour savoir ce qui a été sélectionné, appelez `getSelection()`.	Aucun

Règles concernant les données

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

Visualisation: Graphique à colonnes (ancienne version) Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.