谷歌图表：线图+积分？

Question

I have got line graph that shows value change in time. It works but I thought it would be great if I could add points that shows tooltip on hover. Something like this: But I cannot use tooltip directly on one of those 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, {});

Answer 1

As stated in my comment you can use the annotation role to do this.

Your original code:

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, {});

You need to add two columns -- one for the annotation marker, one for the annotation text. Assuming you want two comments at 14:00 and 16:00 for the sake of example:

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, {});
}

This is the result:

To add asgallant's solution for adding points to the chart, you can do as follows:

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
        }
      }
    });
}

Here is the result of that:

Answer 2

If I read your question correctly, you want points to appear on the line for each data point, and hovering over these points should spawn a tooltip. If that is what you are after, the chart already does both of those things, you just can't see the points because by default they have a size of 0. Set the "pointSize" option in your LineChart to make the points larger:

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

Edit:

To emphasize only some of the points in the chart, you need to add a new data series that contains only those values (you can either add this series directly to the DataTable, or create it on the fly with a DataView if you can somehow distinguish the points you want to emphasize from the others). Then you want to set the chart's series option to hide the line in the second series, remove the second series from the legend, and make its points larger (you can also set its color here if you want to match colors), like this:

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