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
Le graphique d'images génériques est un wrapper générique pour tous les graphiques générés par l'API Google Chart. Veuillez lire la documentation de l'API Chart avant d'essayer d'utiliser cette visualisation. Notez que vous pouvez envoyer jusqu'à 16 000 données à l'aide de cette visualisation, contrairement à la limite de 2 000 appels directs à l'API Chart.
Toutes les données sont transmises aux graphiques à l'aide de DataTable ou DataView. En outre, certains libellés sont transmis en tant que colonnes dans le tableau de données.
Tous les autres paramètres d'URL de l'API Chart (sauf chd) sont transmis en tant qu'options.
Par: Google
Exemples
Voici plusieurs exemples de graphiques.
Graphique en courbes
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addColumn('string');
// Row data is [chl, data point, point label]
dataTable.addRows([
['January',40,undefined],
['February',60,'Initial recall'],
['March',60,'Product withdrawn'],
['April',45,undefined],
['May',47,'Relaunch'],
['June',75,undefined],
['July',70,undefined],
['August',72,undefined]
]);
var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};
var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='line_div'></div>
</body>
</html>
Graphique à barres verticales
Notez que dans les graphiques à barres encapsulées, vous n'avez pas besoin de spécifier chxt='x' comme vous le feriez si vous appelez vous-même le graphique. Si vous ne spécifiez pas d'axe, le graphique d'images génériques tente de configurer correctement le graphique par défaut.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};
var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='bar_div'></div>
</body>
</html>
Graphique à secteurs
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['January',12],
['February',8],
['March',3]
]);
var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
colors:['#3399CC','#00FF00','#0000FF']};
var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='pie_div'></div>
</body>
</html>
Graphique en radar
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[100,10],
[80,20],
[60,30],
[30,40],
[25,50],
[20,60],
[10,70]
]);
var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));
var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='radar_div'></div>
</body>
</html>
Graphique de la carte
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load("current", {packages:["imagechart"]});
</script>
<script type='text/javascript'>
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string');
dataTable.addColumn('number');
dataTable.addRows([
['DZ',0],
['EG',50],
['MG',50],
['GM',35],
['KE',100],
['ZA',100]
]);
var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id='map_div'></div>
</body>
</html>
Chargement...
Le nom du package google.charts.load est "imagechart"
google.charts.load('current', {'packages': ['imagechart']});
Le nom de classe de la visualisation est google.visualization.ImageChart
var visualization = new google.visualization.ImageChart(container_div);
Format des données
Il existe deux formats de données généralisés: un pour les graphiques de la carte et un pour tous les autres. Notez que le seul format numérique compatible avec les données est le type de numéro JavaScript.
Remarque : Vous ne devez pas encoder les valeurs de chaîne transmises en tant que données ou options.
Graphiques des cartes
Un graphique de carte prend un tableau de données avec deux colonnes obligatoires:
- Première colonne - [chaîne] Code de pays ou d'État/province
- Deuxième colonne : [nombre] : valeur de ce pays ou de cet État.
Pour en savoir plus, consultez la documentation sur les graphiques de carte.
Graphiques autres que des cartes
Les graphiques autres que des cartes prennent un tableau de données avec deux colonnes facultatives (une au début, une à la fin) et une ou plusieurs colonnes de données entre les deux:
- Première colonne - [facultatif, chaîne] Chaque entrée représente une étiquette utilisée sur l'axe X (équivalent au paramètre
chlouchxl) pour les graphiques qui le permettent. - Colonnes suivantes : nombre de colonnes numériques, chacune représentant une série de données.
- Dernières colonnes - [facultatif, chaîne] Nombre de colonnes de chaîne après les colonnes de données, où chaque entrée représente un libellé de point de données pour les graphiques compatibles. Si vous souhaitez utiliser cette colonne, vous devez spécifier l'option
annotationColumns.
Les données s'affichent de différentes manières, en fonction du type de graphique. Consultez la documentation de votre graphique.
Remarque concernant les index de colonne : La visualisation sous forme de graphique d'images génériques supprime les colonnes de chaîne du tableau de données avant d'envoyer ce dernier au service de l'API Chart. Par conséquent, les index de colonne dans les options, les méthodes et les événements définis sur cette page incluent les colonnes de chaîne dans le nombre d'index. En revanche, les index de colonne dans toutes les options gérées par le service de l'API Chart (par exemple, l'option chm) ignorent les colonnes de chaîne dans le nombre d'index.
Options de configuration
Les options suivantes sont définies pour cette visualisation. Définissez-les dans l'objet d'options transmis dans la méthode draw() de la visualisation.
Toutes les options suivantes ne sont pas compatibles avec tous les types de graphiques. Consultez la documentation pour votre type de graphique d'images statiques. Vous pouvez transmettre n'importe quel paramètre d'URL de l'API Chart en tant qu'option. Par exemple, le paramètre d'URL chg=50,50 d'une visualisation de graphique serait spécifié ainsi : options['chg'] = '50,50'.
Remarque concernant les couleurs:Les options de couleur, telles que colors, color et backgroundColor, sont spécifiées dans le format de couleur de l'API Chart.
Ce format est semblable au format #RRGGBB, sauf qu'il contient un quatrième nombre hexadécimal facultatif pour indiquer la transparence. Les couleurs lisibles, telles que le "rouge", le "vert", le "bleu", ne sont pas acceptées. Le format de couleur de l'API Chart n'inclut pas le symbole # en tête, mais les options de visualisation de graphiques d'images génériques acceptent les codes couleur avec ou sans #.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| colonnesColonnes d'annotation | Tableau<objet> | none | Libellés de point de données pour différents types de graphiques. Il s'agit d'un tableau d'objets, chacun attribuant une étiquette formatée à un point de données du graphique. Cette option n'est disponible que pour les graphiques compatibles avec des points de données (reportez-vous à la rubrique liée pour savoir lesquels). Le tableau de données doit comporter au moins une colonne d'étiquette de chaîne. Chaque objet du tableau possède les propriétés suivantes:
Exemple : Cet extrait définit un libellé de texte noir de 12 pixels avec le texte extrait de la colonne 0 et attribué au point de données de la colonne 2 de la même ligne : |
| 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. |
| fill | booléen | false | Si la valeur est "true", le remplissage de la zone est effectué sous chaque ligne. Disponible uniquement pour les graphiques en courbes. |
| première colonne masquée | number (nombre) | none | Un index de colonne de données. La colonne répertoriée, ainsi que toutes les colonnes suivantes, ne sera pas utilisée pour dessiner les principaux éléments d'une série de graphiques (comme les lignes d'un graphique en courbes ou les barres d'un graphique à barres). En revanche, elle est utilisée en tant que données pour les repères et les autres annotations. Notez que les colonnes de chaîne sont incluses dans ce nombre d'index. |
| hauteur | number (nombre) | 200 | Hauteur du graphique, en pixels. Si la valeur est manquante ou n'est pas comprise dans une plage acceptable, la hauteur de l'élément conteneur est utilisée. Si elle est également en dehors de la plage acceptable, la hauteur par défaut est utilisée. |
| labels | chaîne | 'none' [aucun] | [Graphique à secteurs uniquement] Libellé, le cas échéant, à afficher pour chaque secteur. Choisissez l'une des valeurs suivantes:
|
| légende | chaîne | 'droite' | Où afficher une légende du graphique par rapport au graphique. Spécifiez l'un des éléments suivants : "top", "bottom", "left", "right", "none". Ignoré dans les graphiques qui n'incluent pas de légendes (comme les graphiques de carte). |
| max | number (nombre) | Valeur maximale des données | Valeur maximale affichée sur l'échelle. Ignoré pour les graphiques à secteurs. La valeur par défaut est la valeur de données maximale, sauf pour les graphiques à barres, où la valeur de données par défaut est maximale. Ceci est ignoré pour les graphiques à barres lorsque la table comporte plusieurs colonnes de données. |
| min | number (nombre) | Valeur de données minimale | Valeur minimale affichée sur l'échelle. Ignoré pour les graphiques à secteurs. La valeur par défaut est la valeur minimale des données, sauf pour les graphiques à barres, où la valeur par défaut est de zéro. Ceci est ignoré pour les graphiques à barres lorsque la table comporte plusieurs colonnes de données. |
| showCategoryLabels | booléen | true | Indique si les libellés doivent s'afficher sur l'axe de la catégorie (c'est-à-dire une ligne). Disponible uniquement pour les graphiques en courbes et à barres. |
| showValueLabels | booléen | true | True affiche un libellé sur l'axe de la valeur. Disponible uniquement pour les graphiques en courbes et à barres. |
| uniqueColumnDisplay | number (nombre) | none | Affiche uniquement la colonne de données spécifiée. Ce nombre est un index basé sur zéro dans la table, où zéro est la première colonne de données. La couleur attribuée à la seule colonne est la même que lorsque toutes les colonnes sont affichées. Ne peut pas être utilisé avec les graphiques à secteurs ou les graphiques de carte. |
| title | chaîne | Chaîne vide | Titre du graphique. Si aucune valeur n'est spécifiée, aucun titre n'est affiché. Le paramètre de graphique équivalent est chtt. |
| 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) | 400 | Largeur du graphique, en pixels. S'il est manquant ou s'il n'est pas compris dans une plage acceptable, la largeur de l'élément conteneur est utilisée. Si elle est également en dehors de la plage acceptable, la largeur par défaut est utilisée. |
Méthodes
| Méthode | Type renvoyé | Description |
|---|---|---|
draw(data, options) |
Aucune | Dessine la carte. |
getImageUrl() |
Chaîne | Renvoie l'URL de l'API Google Chart utilisée pour demander le graphique. Notez qu'il peut comporter plus de 2 000 caractères. Pour en savoir plus, consultez la page sur l'API Google Chart. |
Événements
Si vous définissez la propriété enableEvents sur "true", les graphiques compatibles génèrent des événements pour les événements utilisateur répertoriés dans le tableau ci-dessous. Tous ces événements renvoient un objet event avec les propriétés suivantes:
type: chaîne représentant le type d'événement.region: ID de la région concernée. Ajoutez le paramètrechof=jsonau type de graphique brut pour afficher une liste des noms disponibles. Pour en savoir plus, consultezchof=json.
| Nom | Description | Valeur de type |
|---|---|---|
error |
Déclenché en cas d'erreur lors de la tentative d'affichage du graphique | identifiant, message |
onmouseover |
Déclenché lorsque l'utilisateur passe la souris sur un élément du graphique | "souris" |
onmouseout |
Déclenché lorsque l'utilisateur éloigne le curseur d'un élément de graphique | "souris" |
onclick |
Déclenché lorsqu'un utilisateur clique sur un élément de graphique. | "Clic" |
Quels graphiques sont compatibles avec les événements ?
Tous les graphiques compatibles avec le paramètre chof=json sont compatibles avec la génération d'événements (c'est-à-dire tous les graphiques, sauf les graphiques spéciaux, par exemple les codes QR).
Exemple de gestion des événements
Voici un exemple de barre qui enregistre les clics de la souris.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>
Google Image Events Sample
</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['imagechart']});
</script>
<script type="text/javascript">
function drawVisualization() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number');
dataTable.addColumn('number');
dataTable.addRows([
[10,50],
[50,60],
[60,100],
[80,40],
[40,20]
]);
var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};
var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
chart.draw(dataTable, options);
// Assign event handler
google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
}
google.charts.setOnLoadCallback(drawVisualization);
// Define an event handler
function mouseEventHandler(event) {
document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 300px; height: 300px;"></div>
<div id="debugger"></div>
</body>
</html>
Règles relatives aux données
Les données sont envoyées au service de l'API Google Chart.
Localisation
Cette visualisation est compatible avec toutes les localisations compatibles avec le service Google Charts.