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. Utilisez-la à la place. Pour faciliter la migration, reportez-vous aux 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. Permet d'animer les lignes lorsque l'utilisateur clique sur les entrées de la légende.

Par: Google

Exemple

Codez vous-même sur Playground de la visualisation

<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 contenir une chaîne contenant le libellé de la catégorie. Le nombre de colonnes que vous indiquez doit être numérique. Chaque colonne est affichée sur une ligne distincte.

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	Couleurs par défaut	Couleurs à utiliser pour les éléments du graphique. Tableau de chaînes. Chaque élément est une chaîne qui est compatible avec le code HTML (par exemple, "rouge" ou "#00cc00").
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 un point de données.
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.
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.
taille de ligne	number (nombre)	2	Largeur de ligne en pixels. Utilisez zéro pour masquer toutes les lignes et afficher uniquement les points.
É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.
Taille du point	number (nombre)	3	Taille des points affichés en pixels. Utilisez zéro pour masquer tous les points.
axe inversé	booléen	false	Si cette règle est définie sur "True", les catégories sont tracées de droite à gauche. Par défaut, il faut dessiner de gauche à droite.
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. En revanche, toute valeur supérieure à la largeur du graphique sera recadrée.
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 `setSelection()` standard, 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 d'étiquette.

Événements

Nom	Description	Propriétés
`onmouseover`	Déclenché lorsque l'utilisateur passe la souris 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 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 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 un point ou une légende Lorsqu'un point est sélectionné, 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.