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点，但我似乎无法弄清楚如何合并以下代码行，因为网站上的上一篇文章建议显示每个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);

Google Charts API：始终使用arrayToDataTable显示数据点值。怎么样？

1 个答案: