首页 文章

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

提问于
浏览 次
1

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

我已经按照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/

google-visualization

1 回答

  • 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);
}
    回复于

相关问题