Important:La section "Graphiques d'images" de Google Outils de création de graphiques a été officiellement abandonnée depuis le 20 avril 2012. Elle continuera de fonctionner conformément à notre Règlement relatif aux abandons.
Présentation
Graphique à secteurs affiché sous forme d'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 ê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
Vous pouvez spécifier les options suivantes dans l'objet options transmis dans 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 dans le format de couleurs de l'API Chart |
| color | chaîne | Auto | Spécifie une couleur de base à utiliser pour toutes les séries. Chaque série correspond à un dégradé de la couleur spécifiée. Les couleurs sont spécifiées dans le format de couleurs de l'API Chart.
Ignoré si colors est spécifié. |
| colors | Tableau<chaîne> | Auto | 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 couleurs de l'API Chart.
La couleur i est utilisée pour la colonne de données i, en encadrant le début jusqu'au début s'il y a plus de colonnes de données que de couleurs. Si les variantes d'une seule couleur sont acceptables pour toutes les séries, utilisez plutôt l'option color. |
| enableEvents | boolean | false | Entraîne la génération d'événements déclenchés par l'utilisateur dans les graphiques, tels qu'un clic ou le survol de la souris. Compatible uniquement avec des types de graphiques spécifiques. Consultez la section Événements ci-dessous. |
| taille | Nombre | Hauteur du conteneur | Hauteur du graphique en pixels. |
| is3D | boolean | false | Si la valeur est "true", affiche un graphique en trois dimensions. |
| étiquettes | chaîne | "none" (aucune) | Libellé, le cas échéant, à afficher pour chaque secteur. 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" ou "none". |
| titre | chaîne | sans titre | Texte à afficher au-dessus du graphique. |
| 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. |
Événements
Vous pouvez vous inscrire pour entendre les événements décrits sur la page Graphique d'images génériques.
Règles concernant les données
Veuillez consulter Règles de journalisation de l'API Chart.