Google Charts API：始终使用arrayToDataTable显示数据点值。怎么样？ [英] Google Charts API: Always show the Data Point Values using arrayToDataTable. How?

问题描述

首先，我想让人们知道，虽然有类似的问题标注：

First I'd like to let it be known that although there is a similar question labeled:

Google Charts API：始终在图表中显示数据点值

...在网站上，我似乎无法使用它的解决方案，因为我的图表使用 arrayToDataTable 进行投放。

...on the site, I can't seem to use it's solution since my chart is fed using 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'});

推荐答案

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

For reference, you can input an annotation column to your DataTable using the arrayToDataTable method. Pass an object instead of a string for the column header:

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

这适用于任何列角色。

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

If you just want to display the value of a data point, you don't have to add an extra column to your DataTable. You can use a DataView to add an "annotation" column, calculated as the string-value of a source column:

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

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

Then draw the chart using the view instead of the DataTable:

chart.draw(view, options);

这篇关于Google Charts API：始终使用arrayToDataTable显示数据点值。怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！