Question

使用Google图表Donut Chart可以方便地生成一个工具提示，其中包含计算出的百分比以及文本描述符和基数。

但是，我想将其调整为0dp，但是在documentation中看不到一种不做HTML工具提示的方法，而对于简单的小数点四舍五入来说，这似乎是过大的。

您可以在这里看到问题，它显示为1dp的原因更多，但是，由于它是整数，因此这里四舍五入为0dp：

因此，为了使观看者保持一致并轻松自如，我想将这些数字全部舍入为0dp。

我正在使用的代码是：

<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
            google.charts.load("current", {packages:["corechart"]});
            google.charts.setOnLoadCallback(drawChart);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                ['NPS', 'Count'],
                ['Detractor', 25],
                ['Neutal',    31],
                ['Promoter',  48],
            ]);
            
            var options = {
                legend: 'none',
                pieSliceText: 'none',
                pieHole: 0.7,
                slices: {
                    0: { color: '#232944' },
                    1: { color: '#a5a5a5' },
                    2: { color: '#a9d136' }
                }
            };
            
            var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
                chart.draw(data, options);
            }
        </script>
    </head>
    <body>
        <div id="donutchart" style="width: 900px; height: 500px;"></div>
    </body>
</html>

Answer 1

无法格式化工具提示中显示的百分比值。
唯一的选择是自定义工具提示。

请参阅以下工作片段。

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['NPS', 'Count'],
    ['Detractor', 25],
    ['Neutal',    31],
    ['Promoter',  48],
  ]);

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

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

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: function (dt, row) {
      var label = dt.getValue(row, 0);
      var value = dt.getValue(row, 1);
      var percent = '';
      if (total > 0) {
        percent = ' (' + formatPercent.formatValue(value / total) + ')';
      }
      return label + '\n' + formatNumber.formatValue(value) + percent;
    },
    role: 'tooltip',
    type: 'string'
  }]);

  var options = {
    legend: 'none',
    pieSliceText: 'none',
    pieHole: 0.7,
    slices: {
      0: { color: '#232944' },
      1: { color: '#a5a5a5' },
      2: { color: '#a9d136' }
    },
    tooltip: {
      textStyle: {
        bold: true
      }
    }
  };

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

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

在Google甜甜圈图上设置自动工具提示0dp百分比

1 个答案: