谷歌饼图:带有 2 个小数百分比的舍入问题

Question

我遇到了谷歌图表的问题。我想要一个饼图，显示带有标记图例的所有值，包括低于 0.1% 的非常小的值。

假设我有以下数据：

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

（总匹配数最多 100）

现在的问题是，在计算百分比时，谷歌图表正在四舍五入值，导致 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: 'selection'

请参阅以下示例，切片显示正确的百分比

单击图例项以获取'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>

Answer 2

我仍然需要在悬停时显示工具提示，而不仅仅是在单击时，所以我找到了解决方案，使用处理事件 API：https://developers.google.com/chart/interactive/docs/events。这里有一点改进，适用于切片和图例悬停：

function mouseOverHandler(selection) {
   chart.setSelection([selection]);
}
function mouseOutHandler() {
   chart.setSelection();
}
google.visualization.events
  .addListener(chart, 'onmouseover', mouseOverHandler);
google.visualization.events
  .addListener(chart, 'onmouseout', mouseOutHandler);

这是一个完整的工作示例（基于 @WhiteHat 的代码片段）：

google.charts.load('current', {
  callback: function () {
    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.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
      }
    );
    function mouseOverHandler(selection) {
       chart.setSelection([selection]);
    }
    function mouseOutHandler() {
       chart.setSelection();
    }
    google.visualization.events
      .addListener(chart, 'onmouseover', mouseOverHandler);
    google.visualization.events
      .addListener(chart, 'onmouseout', mouseOutHandler);
  },
  packages: ['corechart', 'table']
});

#chart_div svg g:last-child > g:last-child {
    pointer-events: none;
}

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