Javascript 使Nvd3饼图以小数显示百分比

我在一个角度项目中使用Nvd3绘制一些图表。我使用的是Krispo（）的angular指令

我正在显示一个饼图，其标签以百分比表示值，但显示的值是四舍五入的，不带小数。 请参见下面plunker中的示例：

在上述示例中，百分比应为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);
        }
 }

---

nvd3库似乎不允许您更改：

如果您真的需要它，也许可以在nvd3.js代码中添加另一个labelType

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

---

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

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

---

将其作为饼图配置的一部分传递，将为标签提供两个小数点。

我建议您使用

labelType（'percent'）显示值的小数部分。

。 诀窍在于计算百分比而不是nvd3，例如：

value = (value/tot)*100

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

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

我附上一份清晰的报告

我希望这是有帮助的

---

关于

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

d.data

提供您的原始数据，因此您也可以执行

返回d.data.label+'（'+d3.format（'.2%'）（percent）+'）获得类似狗的东西（20%）

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