如何在谷歌BarChart中显示百分比？ [英] How to show percentage in google BarChart?

问题描述

如何获取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：'美国最大城市人口数量'，chartArea：{width：'50％'}，}; var chart = new google.visualization.BarChart（document.getElementById（'chart_div'））; chart.draw（data，options）;}  

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

$ b

解决方案

使用组方法找到总数 $ b

  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' column

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

<

  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，输入：'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：'美国最大城市的人口数量'，chartArea：{width：'50％'}，}; var chart = new google.visualization.BarChart（document.getElementById（'chart_div'））; chart.draw（view，options）;}  

< script>< / div>< / script> / pre>

How to get the total number and percentage in google charts? I just want to get the percent and the number in the google charts, are there options that need to be set?

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>
      

Sample output below:

解决方案

use the group method to find the total

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

and a DataView to add an 'annotation' column

see following working snippet...

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>

这篇关于如何在谷歌BarChart中显示百分比？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！