Présentation
Les graphiques sur les annotations sont des graphiques en courbes interactifs de séries temporelles 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 Google est différent des annotations compatibles avec les autres graphiques Google (en aires, à barres, à colonnes, combinés, en courbes et à nuage de points). Dans ces graphiques, les annotations sont spécifiées dans une colonne de table de données distincte et affichées sous forme de courts extraits de texte sur lesquels les utilisateurs peuvent pointer pour voir le texte complet de l'annotation. En revanche, le graphique des annotations affiche l'intégralité des annotations à 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
Le graphique peut comporter une ou plusieurs lignes. Chaque ligne représente une position X sur le graphique, c'est-à-dire une heure spécifique. Chaque ligne est décrite par un ensemble d'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 plus petite résolution temporelle sur l'axe X portera sur un jour. - Chaque ligne de données est ensuite décrite par un ensemble d'une à trois colonnes supplémentaires, comme décrit ci-dessous :
- Valeur Y - [Required, Number] La première colonne de chaque ensemble décrit la valeur de la ligne au moment correspondant à la première colonne. L'étiquette de colonne s'affiche sur le graphique en tant que titre de cette ligne.
- Titre de l'annotation : [facultatif, chaîne] si une colonne de chaîne suit la colonne de valeurs et que l'option
displayAnnotations
est définie sur "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 un nombre très élevé, le titre pourrait être "Jour le plus chaud jamais enregistré". - Texte de l'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. Vous devez définir l'option
displayAnnotations
sur "true" pour utiliser cette colonne. Vous pouvez utiliser des balises HTML, si vous définissezallowHtml
surtrue
. Il n'y a pratiquement aucune limite de taille, mais notez que les entrées trop longues peuvent dépasser la section d'affichage. Vous n'êtes pas obligé d'avoir cette colonne, même si vous disposez d'une colonne de titre d'annotation pour ce point. L'étiquette de colonne n'est pas utilisée par le graphique. Par exemple, s'il s'agit de la journée la plus chaude au moment de l'enregistrement, vous pouvez dire quelque chose comme "Le jour le plus proche était de 10 degrés plus froid le jour suivant".
Options de configuration
Nom | |
---|---|
allowHtml |
Si elle est définie sur "true", tout texte d'annotation incluant des balises HTML est affiché au format HTML. Type:booléen
Par défaut : "false"
|
allValuesSuffix |
Suffixe à ajouter à toutes les valeurs de la légende et aux libellés des graduations sur les axes verticaux. Type:chaîne
Par défaut:aucune
|
annotationsWidth |
Largeur (en pourcentage) de la zone d'annotations par rapport à la totalité de la zone du graphique. La valeur doit être un nombre compris entre 5 et 80. Type:nombre
Valeur par défaut:25
|
colors |
Couleurs à utiliser pour les lignes et les libellés du graphique. Tableau de chaînes. Chaque élément est une chaîne dans un format de couleur HTML valide. Par exemple, "rouge" ou "#00cc00". Type:tableau de chaînes
Par défaut:couleurs par défaut
|
dateFormat |
Format utilisé pour afficher les informations de date dans l'angle supérieur droit. Le format de ce champ est celui spécifié par la classe java SimpleDateFormat. Type:chaîne
Par défaut : "MMMM dd, yyyy" ou "HH:mm MMMM dd, yyyy", en fonction du type de la première colonne (date ou date/heure, respectivement).
|
displayAnnotations |
Si cette règle est définie sur "false", le graphique masque la table des annotations, et les annotations et annotationText ne seront pas visibles (la table des annotations ne s'affichera pas non plus si vos données ne contiennent aucune annotation, quelle que soit cette option). Lorsque cette option est définie sur "true", deux colonnes de chaîne d'annotation facultatives peuvent être ajoutées après chaque colonne numérique, l'une pour le titre de l'annotation et l'autre pour le texte de l'annotation. Type:booléen
Valeur par défaut : "true"
|
displayAnnotationsFilter |
Si elle est définie sur "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 |
Permet d'afficher ou non 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
Valeur par défaut : "true"
|
displayExactValues |
Permet d'afficher ou non une version raccourcie et arrondie des valeurs en haut du graphique pour économiser de l'espace. La valeur "false" indique que c'est le cas. Par exemple, si la valeur est définie sur "false", 56123.45 peut s'afficher sous la forme 56.12k. Type:booléen
Par défaut : "false"
|
displayLegendDots |
Permet d'afficher ou non des points à côté des valeurs dans le texte de la légende, où "true" signifie "oui". Type:booléen
Valeur par défaut : "true"
|
displayLegendValues |
Permet d'afficher ou non les valeurs en surbrillance dans la légende, où "true" signifie "oui". Type:booléen
Valeur par défaut : "true"
|
displayRangeSelector |
Permet d'afficher ou non la zone de sélection de la plage de zoom (la zone située au bas du graphique), où "false" signifie non. Le contour du sélecteur de zoom est une version à l'échelle logarithmique de la première série du graphique, mise à l'échelle pour s'adapter à la hauteur du sélecteur de zoom. Type:booléen
Valeur par défaut : "true"
|
displayZoomButtons |
Permet d'afficher ou non les boutons de zoom ("1d 5d 1m", etc.), où "false" signifie "non". Type:booléen
Valeur par défaut : "true"
|
fill |
Nombre compris entre 0 et 100 (inclus) spécifiant la valeur alpha du remplissage sous chaque ligne du graphique en courbes. 100 signifie 100% opaque, et 0 signifie aucun remplissage. La couleur de remplissage est la même que celle de la ligne située au-dessus. Type:nombre
Par défaut:0
|
legendPosition |
Permet de placer la légende colorée sur la même ligne que les boutons de zoom et la date ("sameRow"), ou sur une nouvelle ligne ("newRow"). Type:chaîne
Valeur 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 est ignoré, et le graphique est ajusté pour afficher la coche principale au-dessus du point de données maximal. Cette valeur sera prioritaire sur la valeur maximale de l'axe Y déterminée 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 coche principale suivante en dessous du point de données minimal. Cette valeur sera prioritaire sur la valeur minimale de l'axe Y déterminée par Cette valeur est semblable à Type:nombre
Par défaut:automatique
|
numberFormats |
Spécifie les modèles de format numérique à utiliser pour mettre en forme 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 carte de paires nombre:chaîne
Par défaut:automatique
|
scaleColumns |
Spécifie les valeurs à afficher sur les coches de l'axe Y dans le graphique. Par défaut, une seule échelle s'affiche sur le côté droit, ce qui s'applique aux deux séries. Toutefois, vous pouvez mettre à l'échelle différents côtés du graphique pour obtenir différentes valeurs de série. Cette option utilise un tableau de zéro à trois nombres spécifiant l'indice (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 vous affichez plusieurs échelles, nous vous recommandons de définir l'option Type:tableau de nombres
Par défaut:Automatique
|
scaleFormat |
Format numérique à utiliser pour les libellés des graduations de l'axe. La valeur par défaut de Type:chaîne
Par défaut : "#"
|
scaleType |
Définit les valeurs maximale et minimale affichées sur l'axe Y. Les options suivantes sont disponibles:
Si vous spécifiez les options minimale et/ou maximale, elles prévalent sur les valeurs minimale et maximale déterminées par votre type d'échelle. Type:chaîne
Par défaut : "Fixed" (fixe)
|
table |
Contient les options relatives au tableau des 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 la valeur est 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 0 pour la colonne d'étiquette d'annotation ou 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 est le plus fin. Type:nombre
Par défaut:0
|
zoomEndTime |
Définit la date et l'heure de fin de la plage de zoom sélectionnée. Type:Date
Par défaut:aucune
|
zoomStartTime |
Définit la date et l'heure de début de la plage de zoom sélectionnée. Type:Date
Par défaut:aucune
|
Méthodes
Méthode | |
---|---|
clearChart() |
Efface le graphique et libère toutes les ressources qui lui sont allouées. Return Type (Type renvoyé) : aucun
|
draw(data, options, state) |
Permet de dessiner le graphique. Return Type (Type renvoyé) : aucun
|
getContainer() |
Récupère un handle vers l'élément conteneur contenant le graphique d'annotations. Type renvoyé:gestion d'un élément DOM
|
getSelection() |
Implémentation standard de Type renvoyé:tableau d'éléments de sélection
|
getVisibleChartRange() |
Renvoie un objet avec les propriétés
Type renvoyé: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, où "0" fait référence à la première série de données, et ainsi de suite. Return Type (Type renvoyé) : 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 renvoyé) : aucun
|
showDataColumns(columnIndexes) |
Affiche les séries de données spécifiées à partir du graphique, après leur masquage à l'aide de la méthode Return Type (Type renvoyé) : aucun
|
Événements
Nom | |
---|---|
rangechange |
Déclenché lorsque l'utilisateur modifie le curseur de plage. Les nouveaux points de terminaison de la 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']); } Propriétés:début, fin
|
ready |
Le graphique est prêt pour les appels de méthode externes. Si vous souhaitez interagir avec le graphique et appeler des méthodes après l'avoir dessiné, vous devez configurer un écouteur pour cet événement avant d'appeler la méthode Propriétés:aucune
|
select |
Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez Propriétés:aucune
|
Règles concernant les données
L'ensemble du code et des données sont traités et affichés dans le navigateur. Aucune donnée n'est envoyée à aucun serveur.