如何将 google 饼图格式化为小数点后两位百分比？

Question

原始资金=20000

利润 = 10% (2000)

新资金=22000

新基金 22000 是新基金 22000 的 90.91%，但 google 饼图显示它是 90.9% only，如何让它显示2位小数90.91%?

google.charts.load("current", {packages:["corechart"]});
                                google.charts.setOnLoadCallback(drawChart2);
                                function drawChart2() {
                                    var data = google.visualization.arrayToDataTable([
                                          ['Label', 'Value'],
                                          ['Credit Fund', 20000],
                                          ['Gain', 2000],
                                          ['Drawndown', 0],
                                    ]);
            
                                    var options = {
                                    title: 'abcdfe',
                                    titlePosition: 'none',
                                    legend: { position: 'top', maxLines: 2  },    
                                    pieHole: 0.4,
                                    };

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

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

我试过了:

var formatter = new google.visualization.NumberFormat({fractionDigits:2});
formatter.format(data, 1);

但它不起作用。

Answer 1

无法设置图表显示的百分比的格式。

但您可以使用选项 pieSliceText: 'value' 来显示该值。
然后手动计算百分比并使用它们绘制图表。
我们可以使用自定义工具提示来显示真实值。

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // real data
  var dataReal = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Credit Fund', 20000],
    ['Gain', 2000],
    ['Drawndown', 0],
  ]);

  // aggregate real data to get total
  var dataAgg = google.visualization.data.group(
    dataReal,
    [{column: 0, type: 'string', modifier: function () {return 'Total'}}],
    [{aggregation: google.visualization.data.sum, column: 1, type: 'number'}]
  );

  // build chart data based on %
  var dataChart = new google.visualization.DataTable();
  for (var i = 0; i < dataReal.getNumberOfColumns(); i++) {
    dataChart.addColumn(dataReal.getColumnType(i), dataReal.getColumnLabel(i));
  }

  // display real value in tooltip
  dataChart.addColumn({type: 'string', role: 'tooltip'});
  for (var i = 0; i < dataReal.getNumberOfRows(); i++) {
    dataChart.addRow([dataReal.getValue(i, 0), (dataReal.getValue(i, 1) / dataAgg.getValue(0, 1)), dataReal.getValue(i, 0) + '\n' + dataReal.getFormattedValue(i, 1)]);
  }

  // format decimals
  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.00 %'
  });
  formatNumber.format(dataChart, 1);

  var options = {
    pieSliceText: 'value',
    title: 'abcdfe',
    titlePosition: 'none',
    legend: {
      position: 'top',
      maxLines: 2
    },
    pieHole: 0.4,
  };

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

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

如何将 google 饼图格式化为小数点后两位百分比？

How to format google pie chart to 2 decimal place percentage?

charts

google-visualization