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 à secteurs affiché dans le navigateur à l'aide du format SVG ou VML. Affiche des conseils lorsque vous cliquez sur des segments. Il anime les segments 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:["piechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Chargement...
Le nom du package google.load est "piechart"
google.load("visualization", "1", {packages: ["piechart"]});
Le nom de classe de la visualisation est google.visualization.PieChart
var visualization = new google.visualization.PieChart(container);
Format des données
Deux colonnes. La première colonne doit être une chaîne et contenir le libellé de la tranche. La deuxième colonne doit contenir un nombre et la valeur de la tranche.
Options de configuration
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| backgroundColor | chaîne ou objet | couleur par défaut | Couleur d'arrière-plan de la zone principale du graphique.
L'une des options suivantes :
|
| 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.
|
| enableTooltip | boolean | true | Si cette règle est définie sur "true", les info-bulles s'affichent lorsque l'utilisateur clique sur un segment. |
| 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 "true", affiche un graphique en trois dimensions. |
| légende | chaîne | 'droite' | Position et type de légende. Voici les différents états possibles :
|
| 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. |
| pieJoinAngle | Nombre | 0 | Toute tranche inférieure à cet angle sera combinée en une tranche générique intitulée "Autre". |
| pieMinimalAngle | Nombre | 0 | Toute tranche inférieure à cet angle ne sera pas dessinée dans le graphique à secteurs (bien qu'il continue à recevoir une entrée de légende). Les secteurs restants se développent pour remplir le graphique dans une proportion fixe. Remarque: Cela peut déformer les valeurs apparentées, en particulier lorsque ce nombre est élevé, car une quantité est retirée du graphique. Pour calculer la taille des secteurs, les premiers angles inférieurs à pieJoinAngle sont joints au secteur "Other", puis toutes les tranches supérieures à pieMinimalAngle sont dessinées. |
| titre | chaîne | sans titre | Texte à afficher au-dessus du graphique. |
| 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 ligne et de cellule. L'utilisateur peut sélectionner plusieurs lignes et/ou une seule cellule à la fois. |
setSelection() |
none | Implémentation standard de setSelection(), mais accepte la sélection de plusieurs lignes et/ou d'une seule cellule. Traite chaque entrée de sélection comme une sélection de ligne ou de cellule. |
Événements
| Nom | Description | Propriétés |
|---|---|---|
onmouseover |
Déclenché lorsque l'utilisateur pointe sur une tranche 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 tranche 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 segment ou une légende. Lorsqu'une tranche est sélectionnée, 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 Remarque: Le fait de cliquer sur un segment ne permet pas de basculer entre la sélection et la désélection d'une cellule. Cliquer sur une tranche permet toujours de la sélectionner. En revanche, cliquer sur une entrée de légende permet de sélectionner ou de désélectionner la ligne. |
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.