Question

我正在使用谷歌饼图，我想显示圆形百分比值，但它没有显示那样。任何人，建议我显示圆形百分比值的想法。我的代码看起来像

 google.setOnLoadCallback(drawChart);
                    function drawChart() {
 var data = google.visualization.arrayToDataTable([
                            ['Members', 'Total Members'],
                            ['Members', 23],
                            ['Total Members', 41 - 23]
                        ]);
                    var options = {
                            width: 150,
                            height: 150,
                            chartArea: {
                                width: 150,
                                height: 150,
                                left: 10},
                            legend: {position: 'none'},
                            tooltip: {trigger: 'none'},
                            colors: ['#FEC240', '#FFFFFF'],
                            pieSliceText: 'percentage',
                            pieSliceTextStyle: {
                                bold: true,
                                fontSize: 16,
                                color: 'black'
                            },
                            enableInteractivity: false,
                            pieSliceBorderColor: "#DFE0E1"

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

<div id="checkpie" ></div>

Answer 1

没有标准选项来设置切片上显示的百分比格式

因此，需要手动计算百分比，
使用选项 - ＆gt; pieSliceText: 'value' - 在切片上显示格式化值

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Members', 'Total Members'],
    ['Members', 23],
    ['Total Members', 41 - 23]
  ]);

  // find total to calc % manually
  var totalData = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  // number formatter
  var formatPercent = new google.visualization.NumberFormat({
    pattern: '0%'
  });

  // set formatted value for each row
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var calcPercent = data.getValue(i, 1) / totalData.getValue(0, 1);
    data.setFormattedValue(i, 1, formatPercent.formatValue(calcPercent));
  }
  
  var options = {
    width: 150,
    height: 150,
    chartArea: {
      width: 150,
      height: 150,
      left: 10
    },
    legend: {position: 'none'},
    tooltip: {trigger: 'none'},
    colors: ['#FEC240', '#FFFFFF'],
    pieSliceText: 'value',  // <-- show formatted value on slices
    pieSliceTextStyle: {
      bold: true,
      fontSize: 16,
      color: 'black'
    },
    enableInteractivity: false,
    pieSliceBorderColor: "#DFE0E1"
  };
  var chart = new google.visualization.PieChart(document.getElementById('checkpie'));
  chart.draw(data, options);
}

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

我想谷歌饼图显示pieSliceText是圆整数

1 个答案: