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

Visualisation: Graphique en aires (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.

Présentation

Graphique en aires 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.

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:["areachart"]});
      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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

Chargement...

Le nom du package google.load est "areachart".

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

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

  var visualization = new google.visualization.AreaChart(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 s'affiche sur une ligne distincte.

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	Couleurs par défaut	Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes. Chaque élément est une chaîne dans une couleur acceptée par HTML, par exemple "rouge" ou "#00cc00".
enableTooltip	boolean	true	Si elle est définie sur "True", les info-bulles s'affichent lorsque l'utilisateur clique sur un point de données.
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.
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 du texte de la légende. Les valeurs possibles sont celles de l'option de configuration backgroundColor.
lineSize	Nombre	2	Épaisseur de la ligne en pixels. Utilisez la valeur zéro pour masquer toutes les lignes et n'afficher que les points.
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 marque de grille suivante inférieure.
pointSize	Nombre	3	Taille des points affichés en pixels. Utilisez zéro pour masquer tous les points.
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 ce 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 un point 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'un point 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 un point ou une légende. Lorsqu'un point est sélectionné, la cellule correspondante dans la table 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 en aires (ancienne version) Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.