使Nvd3饼图显示带小数的百分比-Java 学习之路

我'm using Nvd3 in an Angular project to draw some charts. I' m使用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);
        }
 }

3 回答

0
我建议你用 labelType('percent') 显示值的小数部分 . 诀窍在于计算百分比而不是像这样的nvd3，例如：
```
value = (value/tot)*100
```
通过这种方式，您可以计算每个百分比并显示，例如逗号之后的3位数，如下所示：
```
value = (value/tot)*100).toFixed(3)
```
为了清楚，我附上了一个fiddle

我希望这是有帮助的

问候
回复于 2024-04-28T07:52:51+08:00
11
我正在研究和相同 . 查看nv.d3.js代码，发现labelType接受一个函数，
```
labelType: function(d){
      var percent = (d.endAngle - d.startAngle) / (2 * Math.PI);
      return d3.format('.2%')(percent);
    }
```
将其作为饼图配置的一部分传递，给出带有两个小数点的标签 .
回复于 2024-04-28T07:52:51+08:00
3
似乎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)
 };
```
回复于 2024-04-28T07:52:51+08:00

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

3 回答

相关问题