javascript 谷歌图表：折线图+点？

Google Charts: Line graph + points?

提问by Andy

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

采纳答案by jmac

As stated in my commentyou can use the annotation roleto 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:

您需要添加两列——一列用于注释标记，一列用于注释文本。假设您希望在 14:00 和 16:00 有两条评论，例如：

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 solutionfor adding points to the chart, you can do as follows:

要添加asgallant 的图表添加点解决方案，您可以执行以下操作：

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:

结果如下：

回答by asgallant

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:

如果我正确阅读了您的问题，您希望点出现在每个数据点的线上，将鼠标悬停在这些点上应该会产生一个工具提示。如果这就是您所追求的，图表已经完成了这两件事，您只是看不到点，因为默认情况下它们的大小为 0。在 LineChart 中设置“pointSize”选项以使点更大：

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 seriesoption 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:

为了仅强调图表中的某些点，您需要添加一个仅包含这些值的新数据系列（您可以将此系列直接添加到 DataTable，或者如果您能以某种方式区分，则可以使用 DataView 动态创建它您想从其他人那里强调的要点）。然后你想设置图表的series选项来隐藏第二个系列中的线，从图例中删除第二个系列，并使其点更大（如果你想匹配颜色，你也可以在这里设置它的颜色），如下所示：

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