Google柱形图在列栏中显示vert值？

Question

如何在列栏中显示垂直数？

这是一个简单的Google柱形图，如何在顶部的栏栏中显示数字???

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Period Incident');
      data.addColumn('number', '# of Incidents');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 4],
        ['Olives', 5],
        ['Zucchini', 11],
        ['Pepper', 7],
        ['Avocado', 4],
        ['Tomato', 5],
        ['Pepperoni', 2]
      ]);

      // Set chart options
      var options = {
          'title':'How Much Pizza I Ate Last Night',
          legend: { position: 'top', alignment: 'start' },
                    'width':570,
                    'height':420};

            var chart = new google.visualization.ColumnChart(
                    document.getElementById('columnchartIncidents'));

            chart.draw(data, options);
        }

Answer 1

使用'annotation' column role ...

1）将注释列添加到数据表...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Period Incident');
  data.addColumn('number', '# of Incidents');

  // add annotation column role
  data.addColumn({type: 'string', role: 'annotation'});

  data.addRows([
    ['Mushrooms', 3, '3'],  // <-- add annotations to the data
    ['Onions', 4, '4'],
    ['Olives', 5, '5'],
    ['Zucchini', 11, '11'],
    ['Pepper', 7, '7'],
    ['Avocado', 4, '4'],
    ['Tomato', 5, '5'],
    ['Pepperoni', 2, '2']
  ]);

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    legend: {
      position: 'top',
      alignment: 'start'
    },
    width: 570,
    height: 420
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchartIncidents"></div>

2）或使用数据视图为注释角色添加计算列...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Period Incident');
  data.addColumn('number', '# of Incidents');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 4],
    ['Olives', 5],
    ['Zucchini', 11],
    ['Pepper', 7],
    ['Avocado', 4],
    ['Tomato', 5],
    ['Pepperoni', 2]
  ]);

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

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    legend: {
      position: 'top',
      alignment: 'start'
    },
    width: 570,
    height: 420
  };

  var chart = new google.visualization.ColumnChart(
    document.getElementById('columnchartIncidents')
  );
  chart.draw(view, options);  // <-- draw chart with view
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchartIncidents"></div>