谷歌条形图上的列数据标签

Question

我正在尝试将列数据标签添加到谷歌条形图。

我遵循了 API 文档中给出的instructions，这就是我得到的：

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
  ['Year', 'Searches'],
  ['1998', 9800],
  ['2000', 60000000],
  ['2007', 1200000000],
  ['2008', 1745000000],
  ['2009', 2610000000],
  ['2010', 3627000000],
  ['2011', 4717000000],
  ['2012', 5134000000],
  ['2013', 5922000000],
  ['2014', 5740000000]
]); 

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

var options = {
  chart: {
    title: 'Google searches',
    subtitle: 'Average searches per day 1998-2014',
  }
};

var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

chart.draw(view, options);
}

我一定是做错了，因为图表无法呈现任何数据标签。

我做错了什么？

https://jsfiddle.net/q9edfpte/1/

Answer 1

我做了一些更改*，this one 最终奏效了。

*变化： - 'packages':['bar'] --> 'packages':['corechart'] - google.charts.Bar --> google.visualization.ColumnChart

工作版（虽然需要美化）：

google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Searches'],
    ['1998', 9800],
    ['2000', 60000000],
    ['2007', 1200000000],
    ['2008', 1745000000],
    ['2009', 2610000000],
    ['2010', 3627000000],
    ['2011', 4717000000],
    ['2012', 5134000000],
    ['2013', 5922000000],
    ['2014', 5740000000]
  ]); 

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

  var options = {
      title: 'Google searches',
      subtitle: 'Average searches per day 1998-2014',
  };



  var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_values'));
  chart.draw(view, options);
}