javascript - 谷歌饼图 : rounding issue with 2 decimal percentages

Question

我在使用 Google 图表时遇到了问题。我想要一个饼图，显示所有带有标签图例的值，包括低于 0.1% 的非常小的值。

假设我有以下数据:

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     66],
      ['Sleep',    33.95],
      ['Eat', 0.05]
    ]);

(总匹配数最多为 100)

现在的问题是，在计算百分比时，Google Charts 会四舍五入这些值，导致 33.95 变成 34，因此 0.05 变成 0。

此处示例:https://jsfiddle.net/4qe7h21s/

有没有办法让图表引擎创建 2 位小数而不是 1 位小数的百分比？

Answer 1

因为没有选项可以更改百分比的格式或精度

首先，需要设置
sliceVisibilityThreshold: 0.0001

所以 'Eat' 不会落入 'Other'

接下来，在数据中提供自定义格式的值
{v: 66, f: '66.00%'}

将 pieSliceText 和 tooltip.text 设置为 'value'

因为 'Eat' 的切片很小，所以使用
tooltip.trigger: '选择'

看下面的例子，切片显示正确的百分比

点击 'Eat' 的图例项以查看工具提示

google.charts.load('current', {
  callback: function () {
    new google.visualization.PieChart(document.getElementById('chart_div')).draw(
      google.visualization.arrayToDataTable([
        ['Task',  'Hours per Day'],
        ['Work',  {v: 66, f: '66.00%'}],
        ['Sleep', {v: 33.95, f: '33.95%'}],
        ['Eat',   {v: 0.05, f: '0.05%'}]
      ]),
      {
        height: 400,
        legend: {
          position: 'right'
        },
        pieSliceText: 'value',
        sliceVisibilityThreshold: 0.0001,
        title: 'My Daily Activities',
        tooltip: {
          showColorCode: true,
          text: 'value',
          trigger: 'selection'
        },
        width: 600
      }
    );
  },
  packages: ['corechart', 'table']
});

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