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
Le graphique d'images génériques est un wrapper générique pour tous les graphiques produits par l'API de création de graphiques Google. Veuillez lire la documentation de l'API Chart avant d'essayer d'utiliser cette visualisation. Notez que vous pouvez envoyer jusqu'à 16 000 de données à l'aide de cette visualisation, contrairement à la limite de 2 000 dans les appels directs à l'API Chart.
Toutes les données sont transmises aux graphiques à l'aide d'un DataTable ou DataView. En outre, certains libellés sont transmis sous forme de colonnes dans la table de données.
Tous les autres paramètres d'URL de l'API de création de graphiques (à l'exception de chd) sont transmis en tant qu'options.
Par: Google
Exemples
Voici des exemples de différents types 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 géographique
<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ées: un pour les graphiques cartographiques et un pour tous les autres. Notez que le seul format numérique accepté pour les données est le type Nombre JavaScript.
Remarque : Vous ne devez pas encoder en URL les valeurs de chaîne transmises en tant que données ou options.
Graphiques cartographiques
Un graphique de carte utilise une table de données avec deux colonnes obligatoires:
- Première colonne - [chaîne] Code pays ou État/province.
- Deuxième colonne : [nombre] valeur pour ce pays ou cet État.
Pour en savoir plus, consultez la documentation sur les graphiques cartographiques.
Graphiques non cartographiques
Les graphiques non cartographiques utilisent une table de données avec deux colonnes facultatives (une au début et une à la fin) et une ou plusieurs colonnes de données intermédiaires:
- Première colonne – [facultatif, chaîne] Chaque entrée représente un libellé utilisé sur l'axe X (équivalent au paramètre
chlouchxl) pour les graphiques compatibles. - Colonnes suivantes : un nombre illimité de colonnes numériques, chacune représentant une série de données.
- Dernières colonnes : [facultatif, chaîne] N'importe quel 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 seront affichées de différentes manières en fonction du type de graphique. Consultez la documentation correspondant à votre graphique.
Remarque sur les index de colonnes:La visualisation Generic Image Chart (Graphique d'images génériques) supprime les colonnes de chaîne de la table de données avant de l'envoyer 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 des 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 "options" transmis à la méthode draw() de la visualisation.
Les options suivantes ne sont pas toutes compatibles avec tous les types de graphiques. Consultez la documentation de votre type de graphique à 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 sous forme de graphique serait spécifié comme suit: 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 inclut un quatrième nombre hexadécimal facultatif pour indiquer la transparence. Les couleurs lisibles par l'humain, telles que "rouge", "vert", "bleu", etc., ne sont pas acceptées. Le format de couleur de l'API Chart n'inclut pas le symbole # au début, mais les options de visualisation du graphique d'image générique acceptent les codes couleur avec ou sans signe #.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| annotationColumns | Array<object> | none | Étiquettes de points 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 qui acceptent les points de données (consultez l'article associé pour savoir lesquels) et la table de données doit comporter au moins l'une des colonnes de libellé de chaîne. Chaque objet du tableau possède les propriétés suivantes:
Exemple : Cet extrait définit une étiquette de texte noire de 12 pixels, dont le texte provient de la colonne 0 et est attribué au point de données dans la colonne 2 de la même ligne : |
| 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. |
| fill | boolean | false | Si la valeur est "true", la zone sous chaque ligne est remplie. Disponible uniquement pour les graphiques en courbes. |
| firstHiddenColumn | Nombre | none | Un index de colonne de données. La colonne indiquée, ainsi que toutes les colonnes suivantes, ne seront pas utilisées pour dessiner les principaux éléments d'une série de graphiques (tels que les lignes d'un graphique en courbes ou les barres d'un graphique à barres), mais plutôt comme données pour les repères et autres annotations. Notez que les colonnes de chaîne sont incluses dans ce nombre d'index. |
| taille | 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 se trouve également en dehors de la plage acceptable, la hauteur par défaut sera utilisée. |
| étiquettes | chaîne | "none" (aucune) | [Graphique à secteurs uniquement] Étiquette, le cas échéant, à afficher pour chaque secteur. Choisissez l'une des valeurs suivantes:
|
| légende | chaîne | 'droite' | Emplacement d'affichage d'une légende relative au graphique. Spécifiez l'une des valeurs suivantes: "top", "bottom", "left", "right" ou "none". Ignoré dans les graphiques qui ne comportent pas de légendes (comme les graphiques de carte). |
| max | Nombre | Valeur maximale des données | Valeur maximale affichée sur la balance. 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 par défaut est la valeur de données maximale. Cette valeur est ignorée pour les graphiques à barres lorsque la table comporte plusieurs colonnes de données. |
| min | Nombre | Valeur minimale des données | 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 zéro. Cette valeur est ignorée pour les graphiques à barres lorsque la table comporte plusieurs colonnes de données. |
| showCategoryLabels | boolean | true | Permet d'afficher ou non les libellés sur l'axe des catégories (lignes). Disponible uniquement pour les graphiques en courbes et à barres. |
| showValueLabels | boolean | true | "True" affiche une étiquette sur l'axe des valeurs. Disponible uniquement pour les graphiques en courbes et à barres. |
| singleColumnDisplay | Nombre | none | Affiche uniquement la colonne de données spécifiée. Ce nombre est un index de base zéro dans la table, où zéro est la première colonne de données. La couleur attribuée à une seule colonne est la même que lorsque toutes les colonnes sont affichées. Cet outil ne peut pas être utilisé avec des graphiques à secteurs ou des cartes. |
| titre | chaîne | Chaîne vide | Titre du graphique. S'il n'est pas spécifié, aucun titre ne s'affiche. Le paramètre de graphique équivalent est chtt. |
| 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 | 400 | Largeur du graphique, en pixels. Si la valeur est manquante ou n'est pas comprise dans une plage acceptable, la largeur de l'élément conteneur est utilisée. Si elle se situe également en dehors de la plage acceptable, la largeur par défaut sera utilisée. |
Méthodes
| Méthode | Type renvoyé | Description |
|---|---|---|
draw(data, options) |
Aucun | 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 l'API Google Chart. |
Événements
Si vous définissez la propriété enableEvents sur "true", les graphiques correspondants 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: identifiant de la région concernée. Ajoutez le paramètrechof=jsonau type de graphique brut pour afficher la liste des noms disponibles. Pour en savoir plus, consultezchof=json.
| Nom | Description | type Valeur |
|---|---|---|
error |
Déclenché lorsqu'une erreur se produit lors de la tentative d'affichage du graphique. | ID, message |
onmouseover |
Déclenché lorsque l'utilisateur pointe sur un élément du graphique. | "passage de la souris" |
onmouseout |
Déclenché lorsque l'utilisateur éloigne la souris d'un élément du graphique. | "mouseout" (prise de la souris) |
onclick |
Déclenché lorsqu'un utilisateur clique sur un élément du graphique. | "cliquer" |
Quels graphiques sont compatibles avec les événements ?
Tous les graphiques compatibles avec le paramètre chof=json peuvent générer des événements (c'est-à-dire tous les graphiques, à l'exception des graphiques spéciaux, tels que les codes QR).
Exemple de gestion des événements
Voici un exemple illustrant une barre qui enregistre les clics de 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 concernant les données
Les données sont envoyées au service de l'API Google Chart.
Localisation
Cette visualisation est compatible avec toute localisation acceptée par le service Google Charts.