Important : La section "Graphiques d'images" des outils Google Charts est officiellement obsolète depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.
Présentation
Un graphique à secteurs affiché en tant qu'image à l'aide de l'API Google Charts
Exemple
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["imagepiechart"]});
google.charts.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.ImagePieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Chargement...
Le nom du package google.charts.load est "imagepiechart" :
google.charts.load('current', {packages: ['imagepiechart']});
Le nom de classe de la visualisation est google.visualization.ImagePieChart
var visualization = new google.visualization.ImagePieChart(container);
Format des données
Deux colonnes. La première colonne doit contenir une chaîne contenant le libellé de la tranche. La deuxième colonne doit être un nombre contenant la valeur de la tranche.
Options de configuration
Vous pouvez spécifier les options suivantes dans l'objet options transmis à la méthode draw() de la visualisation.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| backgroundColor | chaîne | "#FFFFFF" (blanc) | Couleur d'arrière-plan du graphique, au format de couleur de l'API Chart. |
| couleur | chaîne | Automatique | Spécifie une couleur de base à utiliser pour toutes les séries. Chaque série sera un dégradé de la couleur spécifiée. Les couleurs sont spécifiées dans le format de couleur de l'API Chart.
Ignoré si colors est spécifié. |
| couleurs | Tableau<chaîne> | Automatique | Utilisez cette option pour attribuer des couleurs spécifiques à chaque série de données. Les couleurs sont spécifiées dans le format de couleur de l'API de création de graphiques.
La couleur i est utilisée pour la colonne de données i, qui s'affiche au début si le nombre de colonnes de données est supérieur au nombre de couleurs. Si des variantes d'une seule couleur sont acceptables pour toutes les séries, utilisez plutôt l'option color. |
| enableEvents | booléen | false | Permet aux graphiques de déclencher des événements déclenchés par l'utilisateur, comme un clic ou un survol avec la souris. Compatible uniquement avec certains types de graphiques. Consultez la section Événements ci-dessous. |
| hauteur | number (nombre) | Hauteur du conteneur | Hauteur du graphique en pixels. |
| is3D | booléen | false | Si la valeur est "true", affiche un graphique en trois dimensions. |
| labels | chaîne | 'none' [aucun] | Libellé, le cas échéant, à afficher pour chaque tranche. Choisissez l'une des valeurs suivantes:
|
| légende | chaîne | 'droite' | Emplacement de la légende sur le graphique. Choisissez l'une des valeurs suivantes : 'top', 'bottom', 'left', 'right', 'none'. |
| title | chaîne | aucun titre | Texte à afficher au-dessus du graphique. |
| 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. |
Événements
Vous pouvez vous inscrire pour écouter les événements décrits sur la page Graphique d'images génériques.
Règles relatives aux données
Veuillez consulter les Règles de journalisation de l'API Chart.