Google Charts: Graphique linéaire + points?

J'ai eu de la ligne graphique qui montre l'évolution de la valeur dans le temps. Il fonctionne, mais j'ai pensé que ce serait génial si je pouvais ajouter points qui montre l'info-bulle sur le vol stationnaire. Quelque chose comme ceci: Google Charts: Graphique linéaire + points? Mais je ne peux pas utiliser d'info-bulle directement sur l'un de ces points.

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});

source d'informationauteur Andy

  1. 16

    Comme indiqué dans mon commentaire vous pouvez utiliser le annotation rôle pour ce faire.

    Votre code d'origine:

    var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});

    Vous avez besoin pour ajouter deux colonnes: une pour l'annotation marqueur, un pour le texte de l'annotation. En supposant que vous voulez deux commentaires à 14:00 et 16:00 pour exemple:

    function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null],
    ['13:00',   5, null, null],
    ['14:00',   8, 'A', 'This is Point A'],
    ['15:00',   12, null, null],
    ['16:00',   11, 'B', 'This is Point B'],
    ['17:00',   15, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {});
}

    C'est le résultat:

    Google Charts: Graphique linéaire + points?

    Pour ajouter asgallant de la solution pour ajouter des points au tableau, vous pouvez le faire comme suit:

    function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn('number', 'points');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null, null],
    ['13:00',   5, null, null, null],
    ['14:00',   8, 8, 'A', 'This is Point A'],
    ['15:00',   12, null, null, null],
    ['16:00',   11, 11, 'B', 'This is Point B'],
    ['17:00',   15, null, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
      series: {
        0: {
          //set any applicable options on the first series
        },
        1: {
          //set the options on the second series
          lineWidth: 0,
          pointSize: 5,
          visibleInLegend: false
        }
      }
    });
}

    Voici le résultat:

    Google Charts: Graphique linéaire + points?

  2. 11

    Si j'ai lu votre question correctement, vous voulez que les points apparaissent sur la ligne pour chaque point de données, et planant au-dessus de ces points de spawn, une info-bulle. Si c'est ce que vous êtes après, le graphique fait déjà deux de ces choses, vous ne pouvez pas voir les points de parce que par défaut, ils ont une taille de 0. Définir le "pointSize" option dans votre graphique en courbes pour faire les points de plus grande:

    new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        pointSize: 5
    });

    Edit:

    Seulement souligner certains points dans le graphique, vous devez ajouter une nouvelle série de données qui contient uniquement les valeurs (vous pouvez ajouter cette série directement à la DataTable, ou de le créer à la volée avec un DataView si vous pouvez en quelque sorte distinguer les points que vous voulez souligner les autres). Ensuite, vous voulez pour définir le tableau de series option pour masquer la ligne dans la deuxième série, supprimer la deuxième série de la légende, et de faire de ses points de plus (vous pouvez également définir sa couleur si vous le souhaitez, de faire correspondre les couleurs), comme ceci:

    series: {
    0: {
        //set any applicable options on the first series
    },
    1: {
        //set the options on the second series
        lineWidth: 0,
        pointSize: 5,
        visibleInLegend: false
    }
}