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
Graphique en aires 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:["imageareachart"]});
google.charts.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.ImageAreaChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Chargement...
Le nom du package google.charts.load est "imageareachart"
google.charts.load('current', {packages: ['imageareachart']});
Le nom de classe de la visualisation est google.visualization.ImageAreaChart
var visualization = new google.visualization.ImageAreaChart(container);
Format des données
Chaque colonne représente une ligne du graphique. Chaque entrée correspond à la valeur de l'axe Y au même point de l'axe X, et la visualisation les relie à une ligne droite, puis remplit la zone sous la ligne.
Les données sont traitées par colonne, à partir de la colonne zéro, puis par ordre croissant. Vous devez écrire les lignes les plus hautes en premier, puis les lignes inférieures. En effet, si vous peigniez d'abord une ligne inférieure, une ligne supérieure peindrait et masquerait les lignes inférieures. Par conséquent, essayez de faire en sorte que la colonne 1 ait des points plus élevés que la colonne 2, la colonne 2 plus haut que la colonne 3, etc. Si vous avez un ou deux points plus élevés sur une colonne de droite qu'une colonne de gauche, la ligne du bas peut être partiellement masquée, mais elle doit rester visible.
Toutes les données doivent être de type numérique, à l'exception du premier, qui peut être numérique ou de type chaîne. Si la première colonne est un type de chaîne, les premières entrées de la colonne seront affichées sous forme de libellés sur le X. Si la première colonne est un nombre, aucun libellé de l'axe X n'est affiché. Toutes les colonnes (sauf la première) doivent être numériques. Le nombre de colonnes n'est pas limité.
Options de configuration
| 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. |
| 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. |
| légende | chaîne | 'droite' | Position et type de légende. Voici les différents états possibles :
|
| max | number (nombre) | Prétraitement automatique | Valeur maximale à afficher sur l'axe Y. |
| min | number (nombre) | Prétraitement automatique | Valeur minimale à afficher sur l'axe Y. |
| showCategoryLabels | booléen | true | Si la valeur est définie sur "false", supprime les libellés des catégories (libellés de l'axe X). |
| showValueLabels | booléen | true | Si la valeur est définie sur "false", supprime les étiquettes des valeurs (étiquettes de l'axe Y). |
| title | chaîne | aucun titre | Texte à afficher au-dessus du graphique. |
| valeurLabelsInterval | number (nombre) | Automatique | Intervalle auquel afficher les libellés de l'axe des valeurs. Par exemple, si min est égal à 0, que max est égal à 100 et que valueLabelsInterval est égal à 20, le graphique affiche les libellés d'axe à (0, 20, 40, 60, 80 100). |
| 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.