google-visualization - 谷歌半甜甜圈饼图：是否可以设置总百分比？

Question

我用谷歌图表制作了半个甜甜圈图表，我有一个问题，可见百分比的总和等于 50%。有没有可能的解决方案？

我的图表的图像

Answer 1

您可以使用以下配置选项覆盖切片上显示的文本...

pieSliceText: 'value'

然后在数据中，将单元格的格式化值设置为正确的百分比......

var data = [
  ['Task', 'Hours'],

  // use formatted values
  ['A', {v: 19.2, f: '38.4%'}],
  ['B', {v: 30.8, f: '61.6%'}],

  [null, 50]
];

以下工作片段使用相同的方法，
但计算正确的百分比，
而不是硬编码......

google.charts.load('current', {
  callback: function () {
    var data = [
      ['Task', 'Hours'],
      ['A',  19.2],
      ['B',  30.8],
      [null, 50.0]
    ];

    var total = 0;
    for (var i = 1; i < data.length; i++) {
      if (data[i][0] !== null) {
        total += data[i][1];
      }
    }

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

    var dataTable = google.visualization.arrayToDataTable(data);
    for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
      if (dataTable.getValue(i, 0) !== null) {
        dataTable.setFormattedValue(i, 1, numberFormat.formatValue(((dataTable.getValue(i, 1) / total) * 100)));
      }
    }

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

    var options = {
      height: 400,
      chartArea: {
        top: 24
      },
      colors: ['#8BC34A', '#64B5F6'],
      legend: 'none',
      pieHole: 0.4,
      pieStartAngle: 270,
      pieSliceText: 'value',
      slices: {
        2: {
          color: 'transparent'
        }
      },
      theme: 'maximized',
      width: 400
    };

    chart.draw(dataTable, options);
  },
  packages: ['corechart']
});

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