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

Question

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

我正在显示一个饼图,其标签显示百分比值,但显示的值是四舍五入的,并显示没有小数.请参阅下面的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);
        }
 }

Answer 1

我正在研究和相同.查看nv.d3.js代码,发现labelType接受一个函数,

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

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

Answer 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)
 };