Google Charts API：始终使用 arrayToDataTable 显示数据点值。如何？

Question

首先我想让大家知道，虽然有一个类似的问题标记为：

Google Charts API: Always show the Data Point Values in Graph

...在网站上，我似乎无法使用它的解决方案，因为我的图表是使用 arrayToDataTable 提供的。

这是我的代码：

  function drawChart1998() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Index Trend'],
      ['1/3', 1236777],
      ['1/7', 834427],
      ['1/10', 2164890],
      ['1/14', 1893574],
      ['1/17', 2851881],
      ['1/21', 359504],
      ['1/24', 2264047],
      ['1/28', 3857933],
      ['1/31', 2197402],
      ['2/4', 2469935],
      ['2/7', 1651752],
      ['2/11', 4710582],
      ['2/14', 1565803],
      ['2/18', 345499],
      ['2/21', 2817319],
      ['2/25', 733242],
      ['2/28', 1485788],
      ['3/4', 1091181],
      ['3/7', 4477498],
      ['3/11', 490931],
      ['3/14', 3905556],
      ['3/18', 475417],
      ['3/21', 1512729],
      ['3/25', 1782796],
      ['3/28', 4778434]

    ]);

    var options = {
      curveType: "function",
      title: '1998 Results',
      vAxis: {viewWindow: {min: 0, max: 5006386}},
      hAxis: {textStyle: {color: 'black', fontName: 'verdana', fontSize: 10} },
      series: {0: { pointSize: 6 }}
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_1998'));
    chart.draw(data, options);

  }

如您所见，我设法将系列设置为显示 DataPoint 点，但我似乎无法弄清楚如何按照该网站上一篇文章的建议合并以下代码行，以便显示每个数据点的值。

data.addColumn({type: 'string', role: 'annotation'});

Answer 1

作为参考，您可以使用arrayToDataTable 方法将注释列输入到您的DataTable。为列标题传递一个对象而不是字符串：

var data = google.visualization.arrayToDataTable([
    [/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */],
    // ...
]);

这适用于任何列角色。

如果您只想显示数据点的值，则不必在 DataTable 中添加额外的列。您可以使用 DataView 添加“注释”列，计算为源列的字符串值：

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    type: 'string',
    role: 'annotation',
    sourceColumn: 1,
    calc: 'stringify'
}]);

然后使用视图而不是 DataTable 来绘制图表：

chart.draw(view, options);