使 Nvd3 饼图显示带小数的百分比答案

【问题标题】：Make Nvd3 Pie Chart show percentages with decimals使 Nvd3 饼图显示带小数的百分比
【发布时间】：2015-02-17 06:07:21
【问题描述】：

我在一个 Angular 项目中使用 Nvd3 来绘制一些图表。我正在使用 Krispo (http://krispo.github.io/angular-nvd3/#/) 的 angular 指令。

我正在显示一个饼图，其标签以百分比显示值，但显示的值被四舍五入并显示不带小数。请参阅下面的 plunker 中的示例： http://plnkr.co/edit/jSf1TAkj5rO1S7p5PuJK?p=preview

在上面的示例中，百分比应为 21.9% 和 78%。

我只能更改切片值格式而不是标签，在本例中是百分比。

当我有一个接近 100% 的切片时，这是一个大问题，因为它应该显示类似 99.99% 的内容，而不是显示 100% 给人的印象是只有一个切片。

图表配置如下：

chart: {
        type: 'pieChart',
        height: 500,
        x: function(d){return d.key;},
        y: function(d){return d.y;},
        showLabels: true,
        transitionDuration: 500,
        labelThreshold: 0.01,
        legend: {
              margin: {
                 top: 5,
                 right: 35,
                 bottom: 5,
                 left: 0
              }
        },
        labelType: 'percent',
        valueFormat: function(d) {
              return d3.format(',.5f')(d);
        }
 }

【问题讨论】：

标签： javascript angularjs d3.js nvd3.js

【解决方案1】：

我在研究和一样。查看nv.d3.js代码，发现labelType接受一个函数，

labelType: function(d){
      var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
      return d3.format('.2%')(percent);
    }

将此作为饼图配置的一部分传递，给出带有两个小数点的标签。

【讨论】：

d.data 提供您的原始数据，因此您也可以通过return d.data.label + ' (' + d3.format('.2%')(percent) + ')'; 获得类似Dogs (20%) 的内容

【解决方案2】：

似乎 nvd3 库不允许您更改： https://github.com/novus/nvd3/blob/master/nv.d3.js#L10490

"percent": d3.format('%')(percent)

如果你真的需要这个，可以在 nvd3.js 代码中添加你想要的另一个 labelType

var labelTypes = {
     "key" : getX(d.data),
     "value": getY(d.data),
     "percent": d3.format('%')(percent),
     "percent2digits": d3.format('.2%')(percent)
 };

【讨论】：

是的，他们似乎没有公开任何配置百分比格式的选项。

【解决方案3】：

我建议您使用labelType('percent') 显示值的小数部分。诀窍在于计算百分比，而不是像这样的 nvd3：

value = (value/tot)*100

通过这种方式，您可以计算每个百分比并显示，例如逗号后的 3 位数字，如下所示：

value = (value/tot)*100).toFixed(3)

为了清楚起见，我附上了fiddle

希望对你有帮助

问候

【讨论】：