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 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. La visualisation les relie par une ligne droite, puis remplit la zone sous la ligne.
Les données sont traitées par colonne, en partant de la colonne 0 et en augmentant. Vous devez écrire les lignes les plus hautes en premier, puis les lignes inférieures, car si vous peignez d'abord une ligne inférieure, une ligne supérieure peindrait et masquerait toutes 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 au-dessus de la colonne 3, et ainsi de suite. Si vous avez un ou deux points au-dessus d'une colonne de droite par rapport à une colonne de gauche, cela peut obscurcir partiellement la ligne inférieure, mais elle devrait toujours être visible.
Toutes les données doivent être de type numérique, à l'exception de la première, qui peut être numérique ou de chaîne. Si la première colonne est de type chaîne, les premières entrées de colonne sont affichées sous forme de libellés sur l'axe X. Si la première colonne est un nombre, aucun libellé de l'axe X ne s'affiche. Toutes les colonnes (sauf la première) doivent contenir des nombres. 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 dans le format de couleurs de l'API Chart |
| 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. |
| légende | chaîne | 'droite' | Position et type de légende. Voici les différents états possibles :
|
| max | Nombre | automatique | Valeur maximale à afficher sur l'axe Y. |
| min | Nombre | automatique | Valeur minimale à afficher sur l'axe Y. |
| showCategoryLabels | boolean | true | Si cette règle est définie sur "false", les libellés des catégories sont supprimés (les libellés de l'axe X). |
| showValueLabels | boolean | true | Si cette règle est définie sur "false", les étiquettes des valeurs (libellés de l'axe Y) sont supprimées. |
| titre | chaîne | sans titre | Texte à afficher au-dessus du graphique. |
| valueLabelsInterval | Nombre | Auto | Intervalle auquel afficher les libellés de l'axe des valeurs. Par exemple, si min correspond à 0, max à 100 et valueLabelsInterval à 20, le graphique affichera les libellés des axes (0, 20, 40, 60, 80 100). |
| 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.