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 à courbes 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:["imagelinechart"]});
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.ImageLineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, min: 0});
}
</script>
</head>
<body>
<div id="chart_div" style="width: 400px; height: 240px;"></div>
</body>
</html>
Chargement...
Le nom du package google.charts.load est "imagelinechart".
google.charts.load('current', {packages: ['imagelinechart']});
Le nom de classe de la visualisation est google.visualization.ImageLineChart.
var visualization = new google.visualization.ImageLineChart(container);
Format des données
La première colonne doit contenir une chaîne contenant le libellé de la catégorie. Le nombre de colonnes que vous indiquez doit être numérique. Chaque colonne est affichée sur une ligne distincte.
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. |
| showAxisLines | booléen | true | Si la valeur est "false", les lignes et les libellés de l'axe sont supprimés. |
| showCategoryLabels | booléen | Identique à showAxisLines | Si la valeur est définie sur "false", supprime les libellés des catégories (libellés de l'axe X). |
| showValueLabels | booléen | Identique à showAxisLines | 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.