Présentation
Les graphiques d'annotations sont des graphiques en courbes interactifs qui acceptent les annotations. Notez que la chronologie annotée utilise désormais automatiquement le graphique d'annotations.
Alerte de confusion:actuellement, le graphique d'annotations de Google se distingue des annotations acceptées par les autres graphiques de Google (aire, zone, barre, colonne, ligne et dispersion). Dans ces graphiques, les annotations sont spécifiées dans une colonne de tableau de données distincte et affichées sous forme de courts extraits de texte sur lesquels les utilisateurs peuvent passer la souris pour voir le texte complet. En revanche, le graphique d'annotations présente les annotations complètes sur la droite, comme illustré ci-dessous.
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':['annotationchart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Kepler-22b mission'); data.addColumn('string', 'Kepler title'); data.addColumn('string', 'Kepler text'); data.addColumn('number', 'Gliese 163 mission'); data.addColumn('string', 'Gliese title'); data.addColumn('string', 'Gliese text'); data.addRows([ [new Date(2314, 2, 15), 12400, undefined, undefined, 10645, undefined, undefined], [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter', 12374, undefined, undefined], [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall', 15766, 'Gallantors', 'First Encounter'], [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!', 34334, 'Gallantors', 'Statement of shared principles'], [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties', 66467, 'Gallantors', 'Mysteries revealed'], [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost', 79463, 'Gallantors', 'Omniscience achieved'] ]); var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div')); var options = { displayAnnotations: true }; chart.draw(data, options); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
Chargement...
Le nom du package google.charts.load
est "annotationchart"
.
google.charts.load("current", {packages: ['annotationchart']});
Le nom de classe de la visualisation est google.visualization.AnnotationChart
.
var visualization = new google.visualization.AnnotationChart(container);
Format des données
Vous pouvez afficher une ou plusieurs lignes sur votre graphique. Chaque ligne représente une position X sur le graphique, soit une heure spécifique. Chaque ligne est décrite par un ensemble de une à trois colonnes.
- La première colonne est de type
date
oudatetime
et spécifie la valeur X du point sur le graphique. Si cette colonne est de typedate
(et nondatetime
), la résolution temporelle la plus faible sur l'axe X sera d'un jour. - Chaque ligne de données est ensuite décrite par un ensemble de une à trois colonnes supplémentaires, comme décrit ci-dessous :
- Valeur Y - [obligatoire, nombre]. La première colonne de chaque ensemble décrit la valeur de la ligne au moment correspondant à partir de la première colonne. Le libellé de la colonne est affiché sur le graphique en tant que titre de la ligne.
- Titre d'annotation - [Facultatif, chaîne] Si une colonne de chaîne suit la colonne de valeur et que l'option
displayAnnotations
est "true", cette colonne contient un titre court décrivant ce point. Par exemple, si cette ligne représente la température au Brésil et que ce point est très élevé, le titre pourrait être "Jour le plus chaud enregistré". - Texte d'annotation - [Chaîne facultative] S'il existe une deuxième colonne de chaîne pour cette série, la valeur de la cellule sera utilisée comme texte descriptif supplémentaire pour ce point. Pour utiliser cette colonne, vous devez définir l'option
displayAnnotations
sur "true". Vous pouvez utiliser des tags HTML si vous définissezallowHtml
surtrue
. Il n'y a pas de limite de taille, mais notez que les entrées trop longues risquent de dépasser la section d'affichage. Vous n'êtes pas obligé d'avoir cette colonne, même si vous avez une colonne de titre d'annotation pour ce point. Le libellé de colonne n'est pas utilisé par le graphique. Par exemple, s'il s'agissait du jour le plus chaud de l'enregistrement, vous pourriez dire "Le jour le plus proche a eu 10 degrés de moins".
Options de configuration
Nom | |
---|---|
allowHtml |
Si ce paramètre est défini sur "true", tout texte d'annotation comprenant des balises HTML sera rendu HTML. Type:booléen
Par défaut:false
|
allValuesSuffix |
Suffixe à ajouter à toutes les valeurs de la légende et aux coches des axes verticaux. Type : chaîne
Par défaut : aucun
|
annotationsWidth |
Largeur (en pourcentage) de la zone d'annotations, sur l'ensemble de la zone du graphique. Veuillez saisir un nombre compris entre 5 et 80. Type : nombre
Par défaut:25
|
couleurs |
Couleurs à utiliser pour les lignes et les libellés du graphique. Tableau de chaînes. Chaque élément est une chaîne au format de couleur HTML valide. Par exemple, "rouge" ou "#00cc00". Type : tableau de chaînes
Par défaut:couleurs par défaut
|
Format de date |
Format utilisé pour afficher les informations de date en haut à droite. Le format de ce champ est spécifié par la classe SimpleDateFormat de Java. Type : chaîne
Par défaut : "jj MMMM, aaaa" ou "HH:mm jj MMMM, aaaa", selon le type de la première colonne (date ou date/heure, respectivement).
|
Annotations display |
S'il est défini sur "false", le graphique masque le tableau d'annotations. Les annotations et le texte d'annotation ne sont pas visibles (le tableau d'annotations n'apparaîtra pas non plus si vos données ne contiennent aucune annotation, quelle que soit l'option choisie). Lorsque cette option est définie sur "true", après chaque colonne numérique, vous pouvez ajouter deux colonnes de chaîne d'annotation facultatives, une pour le titre de l'annotation et une pour le texte de l'annotation. Type : booléen
Par défaut : true
|
Filtre d'annotations display |
Si la valeur est "true", le graphique affiche une commande de filtrage pour filtrer les annotations. Utilisez cette option lorsqu'il existe de nombreuses annotations. Type:booléen
Par défaut:false
|
DisplayDateBarSeparator |
Indique s'il faut afficher un petit séparateur de barre ( | ) entre les valeurs de la série et la date dans la légende, où "true" signifie "oui". Type : booléen
Par défaut:true
|
ValeursDisplayDisplayExactes |
Indique s'il faut afficher une version abrégée et arrondie des valeurs en haut du graphique pour économiser de l'espace. La valeur "false" indique qu'elle peut l'être. Par exemple, si elle est définie sur "false", 56123.45 peut être affiché sous la forme 56.12k. Type : booléen
Par défaut:false
|
displayLegendDots |
Indique s'il faut afficher les points à côté des valeurs dans le texte de la légende, où "true" signifie "oui". Type : booléen
Par défaut : true
|
displayLegendValues |
Indique si les valeurs mises en surbrillance doivent être affichées dans la légende, où "true" signifie "oui". Type:booléen
Par défaut:true
|
sélecteur de plage d'affichage |
Indique si la zone de sélection de la plage de zoom (zone en bas du graphique) doit être affichée, où "false" signifie "non". Le contour du sélecteur de zoom est une version d'échelle logarithmique de la première série du graphique, adaptée à la hauteur du sélecteur de zoom. Type : booléen
Par défaut:true
|
displayZoomButton |
Afficher ou non les boutons de zoom ("1d 5d 1m", etc.), où "false" signifie non. Type:booléen
Par défaut:true
|
fill |
Nombre compris entre 0 et 100 (inclus) spécifiant l'alpha de remplissage sous chaque ligne du graphique linéaire. 100 signifie 100% opaque et 0 signifie aucun remplissage. La couleur de remplissage est identique à celle de la ligne située au-dessus. Type:nombre
Par défaut:0
|
position de la légende |
Permet de placer la légende colorée sur la même ligne à l'aide des boutons de zoom et de la date ("sameRow"), ou sur une nouvelle ligne ("newRow"). Type : chaîne
Par défaut : "sameRow"
|
max |
Valeur maximale à afficher sur l'axe Y. Si le point de données maximal dépasse cette valeur, ce paramètre sera ignoré, et le graphique sera ajusté pour afficher la prochaine coche majeure au-dessus du point de données maximal. Elle aura priorité sur le maximum de l'axe Y déterminé par Cette valeur est semblable à Type:nombre
Par défaut:automatique
|
min |
Valeur minimale à afficher sur l'axe Y. Si le point de données minimal est inférieur à cette valeur, ce paramètre est ignoré, et le graphique est ajusté pour afficher la prochaine coche majeure sous le point de données minimal. Cela aura priorité sur le minimum de l'axe Y déterminé par Cette valeur est semblable à Type:nombre
Par défaut : automatique
|
formats numériques |
Spécifie les formats de format numérique à utiliser pour formater les valeurs en haut du graphique. Les formats doivent être au format spécifié par la classe java DecimalFormat.
Si cette option est spécifiée, l'option Type:chaîne ou mappage de paires "number:String"
Par défaut:automatique
|
Colonnes d'échelle |
Spécifie les valeurs à afficher sur les coches de l'axe Y du graphique. Par défaut, une seule échelle s'affiche du côté droit, ce qui s'applique aux deux séries. Toutefois, vous pouvez adapter différents côtés du graphique à différentes valeurs de série. Cette option utilise un tableau de zéro à trois chiffres spécifiant l'index (basé sur zéro) de la série à utiliser comme valeur d'échelle. L'emplacement de ces valeurs dépend du nombre de valeurs que vous incluez dans votre tableau:
Lorsque plusieurs tailles sont affichées, il est recommandé de définir l'option Type:tableau de nombres
Par défaut:Automatique
|
mise à l'échelle |
Format numérique à utiliser pour les graduations des axes de l'axe. La valeur par défaut de Type:chaîne
Par défaut : "#"
|
Type d'évolutivité |
Définit les valeurs minimale et maximale affichées sur l'axe Y. Les options suivantes sont disponibles:
Si vous spécifiez les options minimale et/ou maximale, elles seront prioritaires sur les valeurs minimale et maximale déterminées par votre type d'échelle. Type:chaîne
Par défaut : "fixed"
|
table |
Contient des options liées au tableau d'annotations. Pour spécifier les propriétés de cet objet, vous pouvez utiliser la notation littérale d'objet: var options: { table: { sortAscending: true, sortColumn: 1 } }; Type:objet
Par défaut : null
|
table.sortAscending |
Si défini sur Type : booléen
Par défaut:false
|
table.sortColumn |
Index de colonne de la table d'annotations pour laquelle les annotations seront triées. L'index doit être soit 0 pour la colonne de libellé d'annotation, soit 1 pour la colonne de texte d'annotation. Type : nombre
Par défaut : 0
|
épaisseur |
Nombre compris entre 0 et 10 (inclus) spécifiant l'épaisseur des lignes, où 0 correspond à la valeur la plus fine. Type : nombre
Par défaut:0
|
Heure de fin du zoom |
Définit la date/l'heure de fin de la plage de zoom sélectionnée. Type:Date
Par défaut : aucun
|
Heure de début du zoom |
Définit la date et l'heure de début de la plage de zoom sélectionnée. Type:Date
Par défaut:aucun
|
Méthodes
Méthode | |
---|---|
clearChart() |
Efface le graphique et libère toutes ses ressources allouées. Return Type (Type de retour) : aucun
|
draw(data, options, state) |
Dessine le graphique. Return Type (Type de retour) : aucun
|
getContainer() |
Récupère un handle vers l'élément conteneur contenant le graphique d'annotation. Type de retour : Traitement vers un élément DOM
|
getSelection() |
Implémentation Type de renvoi:tableau des éléments de sélection
|
getVisibleChartRange() |
Renvoie un objet avec les propriétés
Type de retour : un objet avec les propriétés
start et end .
|
hideDataColumns(columnIndexes) |
Masque la série de données spécifiée du graphique. Accepte un paramètre qui peut être un nombre ou un tableau de nombres, dans lequel 0 fait référence à la première série de données, etc. Return Type (Type de retour) : aucun
|
setVisibleChartRange(start, end) |
Définit la plage visible (zoom) sur la plage spécifiée. Accepte deux paramètres de type Return Type (Type de retour) : aucun
|
showDataColumns(columnIndexes) |
Affiche la série de données spécifiée du graphique, après qu'elles ont été masquées à l'aide de la méthode Return Type (Type de retour) : aucun
|
Événements
Nom | |
---|---|
rangechange |
Déclenché lorsque l'utilisateur change le curseur de la plage. Les nouveaux points de terminaison de plage seront disponibles en tant que google.visualization.events.addListener(chart, 'rangechange', rangechange_handler); function rangechange_handler(e) { console.log('You changed the range to ', e['start'], ' and ', e['end']); } Properties (Propriétés) : start, end
|
ready |
Le graphique est prêt pour les appels de méthode externe. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir tracé, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Properties (Propriétés) : aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Properties (Propriétés) : aucune
|
Règles relatives aux données
L'ensemble du code et des données est traité et affiché dans le navigateur. Aucune donnée n'est envoyée à un serveur.