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

Answer 3

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

value = (value/tot)*100

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

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

我附上fiddle以获得清晰度

我希望这很有用

此致

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

3 个答案: