En utilisant la chronologie annotée de Google dans l'API Visualisations, pouvez-vous insérer des annotations quel que soit l'ensemble de données?

Question

Je peux insérer des annotations sur des ensembles de données spécifiques sur le graphique, mais je souhaite avoir plusieurs lignes sur le graphique sans associer l'annotation à une ligne spécifique, mais avec une date à la place.

Voici un Exemple de ce que je veux faire. Remarquez les bulles annexées sur l'axe x et non une ligne spécifique sur le graphique.

J'ai lu l'API et je ne peux pas voir une option comme celle-ci, mais je me demande si quelqu'un sait un moyen.

Merci.

Answer 1

Aucune expérience, mais ma réaction instantanée était que vous puissiez essayer une série avec les annotations attachées avec tous les zéros comme données - et l'exclure de la légende?

Answer 2

Si cela ne vous dérange pas d'utiliser un SVG Graphique en ligne avec Annotations Vous pouvez également recréer cela avec plus de flexibilité. Si vous définissez la colonne d'annotation pour suivre immédiatement les valeurs de l'axe X, les annotations apparaîtront tout en bas du graphique (sur l'axe) et ne seront attachées à aucune catégorie. Voici un échantillon:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number','Day');
  data.addColumn({type: 'string', role: 'annotation'});
  data.addColumn({type: 'string', role: 'annotationText'});
  data.addColumn('number', '.DJI');
  data.addColumn('number', '.INX');
  data.addColumn('number', '.INIC');
  data.addRows([
    [1, null, null, 1000, 400, 300],
    [2, 'A', 'did stuff', 1170, 460, 400],
    [3, 'B', 'did more stuff', 660, 1120, 540],
    [4, null, null, 1030, 540, 620],
    [5, 'C', 'stopped stuff', 1070, 600, 700]
  ]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {focusTarget: 'category',
                  width: 500, height: 400,
                  vAxis: {maxValue: 10},}
          );
}

Cela finit par ressembler à ceci: