Question

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

我已按照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'] - ＆gt; '包'：[ 'corechart'] - google.charts.Bar - ＆gt; 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);
}

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

1 个答案: