Graphique d'annotation

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 ou datetime et spécifie la valeur X du point sur le graphique. Si cette colonne est de type date (et non datetime), 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éfinissez allowHtml sur true. 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 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 prochaine coche majeure sous le point de données minimal. Cela aura priorité sur le minimum de l'axe Y déterminé par scaleType.

Cette valeur est semblable à minValue dans les graphiques principaux.

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

  • 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 la droite du graphique.
  • Si vous spécifiez deux valeurs, une échelle pour la deuxième série est ajoutée à droite du graphique.
  • Si vous spécifiez trois valeurs, une échelle pour la troisième série sera ajoutée au milieu du graphique.
  • Toute valeur après le troisième du tableau sera ignorée.

Lorsque plusieurs tailles sont affichées, il est recommandé de définir l'option scaleType sur "allfixed" ou "allmaximized".

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

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:

  • "maximized" : l'axe Y s'étendra du minimum au maximum de la série. Si vous disposez de plusieurs séries, utilisez allmaximized.
  • "fixed" [par défaut] : l'axe Y varie en fonction des valeurs des valeurs de données :
    • Si toutes les valeurs sont supérieures ou égales à 0, l'axe Y s'étend de zéro à la valeur de données maximale.
    • Si toutes les valeurs sont <=0, l'axe des ordonnées va de zéro à la valeur de données minimale.
    • Si les valeurs sont à la fois positives et négatives, l'axe Y va de la valeur maximale à la série à sa valeur minimale.
      Pour plusieurs séries, utilisez "allfixed".
  • "allmaximized" : identique à "maximisé", mais utilisé lorsque plusieurs échelles sont affichées. Les deux graphiques sont agrandis sur la même échelle, ce qui signifie qu'un graphique sera présenté de façon trompeuse par rapport à l'axe Y. Toutefois, si vous pointez sur chaque série, sa valeur réelle s'affiche.
  • "allfixed" : identique à "fixe", mais utilisé lorsque plusieurs échelles sont affichées. Ce paramètre ajuste chaque échelle en fonction de la série à laquelle il s'applique (à utiliser conjointement avec scaleColumns).

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 true, inverse l'ordre de la table d'annotations et affiche ces dernières par 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 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 getSelection() standard. 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 de renvoi:tableau des éléments de sélection
getVisibleChartRange()

Renvoie un objet avec les propriétés start et end, chacune d'entre elles étant un objet Date représentant la sélection de l'heure actuelle.

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 Date qui représentent les première et dernière heures de la plage visible souhaitée. Définissez la valeur start sur null pour inclure tous les éléments compris entre la première date et end, et la valeur end sur null pour inclure toutes les valeurs comprises entre start et la dernière date.

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

É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 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']);
}
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 draw et de les appeler uniquement après le déclenchement de l'événement.

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 getSelection().

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.