javascript - 如何在谷歌条形图中显示百分比？

Question

如何获取google charts中的总数和百分比？ 我只想获取 google 图表中的百分比和数字，是否需要设置选项？

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {
	var data = google.visualization.arrayToDataTable([
		['City', '2010 Population',],
		['New York City, NY', 8175000],
		['Los Angeles, CA', 3792000],
		['Chicago, IL', 2695000],
		['Houston, TX', 2099000],
		['Philadelphia, PA', 1526000]
	]);
	var options = {
		title: 'Population of Largest U.S. Cities',
		chartArea: {width: '50%'},
	};
	var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>
      

示例输出如下:

Answer 1

使用group求总数的方法

var groupData = google.visualization.data.group(
  data,
  [{column: 0, modifier: function () {return 'total'}, type:'string'}],
  [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
);

和一个 DataView 添加一个 'annotation' 列

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawBasic,
  packages: ['corechart']
});

function drawBasic() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population',],
    ['New York City, NY', 8175000],
    ['Los Angeles, CA', 3792000],
    ['Chicago, IL', 2695000],
    ['Houston, TX', 2099000],
    ['Philadelphia, PA', 1526000]
  ]);

  var groupData = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  var formatPercent = new google.visualization.NumberFormat({
    pattern: '#,##0.0%'
  });

  var formatShort = new google.visualization.NumberFormat({
    pattern: 'short'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var amount =  formatShort.formatValue(dt.getValue(row, 1));
      var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
      return amount + ' (' + percent + ')';
    },
    type: 'string',
    role: 'annotation'
  }]);

  var options = {
    annotations: {
      alwaysOutside: true
    },
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
  };
  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

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