Graphique d'annotation

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 ou datetime, et spécifie la valeur X du point sur le graphique. Si cette colonne est de type date (et non datetime), 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éfinissez allowHtml sur true. 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 scaleType.

Cette valeur est semblable à maxValue dans les graphiques principaux.

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 scaleType.

Cette valeur est semblable à minValue dans les graphiques principaux.

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 aucune valeur n'est spécifiée, le format de format par défaut est utilisé.
  • Si un seul format de chaîne est spécifié, il est utilisé pour toutes les valeurs.
  • Si une map est spécifiée, les clés sont des index de série (basés sur zéro) et les valeurs sont les modèles à utiliser pour mettre en forme la série spécifiée.

    Vous n'êtes pas obligé d'inclure un format pour chaque série du graphique. Toute série non spécifiée utilisera le format par défaut.

Si cette option est spécifiée, l'option displayExactValues est ignorée.

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:

  • Si vous spécifiez un tableau vide, le graphique n'affichera pas de valeurs Y à côté des coches.
  • Si vous spécifiez une valeur, l'échelle de la série indiquée ne s'affiche que sur le côté droit du graphique.
  • Si vous indiquez deux valeurs, l'échelle de la deuxième série est ajoutée à droite du graphique.
  • Si vous indiquez trois valeurs, une échelle est ajoutée au milieu du graphique pour la troisième série.
  • Toutes les valeurs après la troisième valeur du tableau sont ignorées.

Lorsque vous affichez plusieurs échelles, nous vous recommandons de définir l'option scaleType sur "allFixed" ou "allmaximized".

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 '#' s'affiche sous la forme d'un entier.

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:

  • "maximisée" : l'axe Y couvre les valeurs minimales et maximales de la série. Si vous avez plusieurs séries, utilisez allmaximized.
  • 'fixe' [par défaut] : l'axe Y varie en fonction des valeurs des données :
    • Si toutes les valeurs sont >=0, l'axe Y s'étend de zéro à la valeur de données maximale.
    • Si toutes les valeurs sont <=0, l'axe Y s'étend de zéro à la valeur de données minimale.
    • Si les valeurs sont à la fois positives et négatives, l'axe Y s'étend du nombre maximal de la série au minimum.
      Pour plusieurs séries, utilisez "all fixed".
  • "allmaximized" : identique à "maximized", mais utilisé lorsque plusieurs échelles sont affichées. Les deux graphiques seront agrandis sur la même échelle, ce qui signifie qu'un seul sera présenté de façon trompeuse par rapport à l'axe Y, mais que vous pointez sur chaque série pour afficher sa valeur réelle.
  • "allFix" : identique à "fixe", mais utilisé lorsque plusieurs échelles sont affichées. Ce paramètre ajuste chaque échelle à la série à laquelle elle s'applique (à utiliser conjointement avec scaleColumns).

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 true, inverse l'ordre du tableau des annotations et les affiche dans l'ordre croissant.

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 getSelection(). Les éléments sélectionnés sont des éléments de cellule. L'utilisateur ne peut sélectionner qu'une seule cellule à la fois.

Type renvoyé:tableau d'éléments de sélection
getVisibleChartRange()

Renvoie un objet avec les propriétés start et end, chacun d'entre eux étant un objet Date, représentant la sélection de temps actuelle.

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 Date qui représentent la première et la dernière heure de la plage visible sélectionnée. Définissez start sur "null" pour inclure toutes les données de la date la plus proche à la end. Définissez end sur "null" pour inclure toutes les données allant du début à la dernière date.

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 hideDataColumns. 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

É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 event['start'] et event['end']:

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 draw, puis ne les appeler qu'après le déclenchement de l'événement.

Propriétés:aucune
select

Déclenché lorsque l'utilisateur clique sur une entité visuelle. Pour savoir ce qui a été sélectionné, appelez getSelection().

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.