如何在nvd3饼图的工具提示中获得百分比？

Question

我有一个nvd3饼图。我获取百分比值作为标签，但我想在工具提示中。这是HTML：

<nvd3-pie-chart data="Data1"id="labelTypePercentExample"
      width="550"
      height="350"
      x="xFunction()"
      y="yFunction()"
      showLabels="true"
      pieLabelsOutside="false"
      tooltips="true"
      tooltipcontent="toolTipContentFunction()"
      labelType="percent"
      showLegend="true">
  </nvd3-pie-chart>

DATA

Data1=[{ key: "Ongoing", y: 20 },
       { key: "completed", y: 0 }];

这是用于将键显示为工具提示数据的工具提示功能。

$scope.toolTipContentFunction = function(){
    return function(key, x, y, e, graph) {
       return '<h1>' + key + '</h1>'
    }
}

Answer 1

以下是显示工具提示中百分比的jsfiddle。

关键代码是:(您必须计算包含饼图的所有值的总和）

var data = [
    {"label": "Water",        "value": 63}, 
    {"label": "Milk",         "value": 17}, 
    {"label": "Lemonade",     "value": 27},
    {"label": "Orange Juice", "value": 32}
];

var total = 0;
data.forEach(function (d) {
    total = total + d.value;
});
var tp = function(key, y, e, graph) {
    return '<p>' +  (y * 100/total).toFixed(3) + '%</p>';
};

此外，您在创建NVD3图表时添加此行，如您所知：

.tooltipContent(tp);

最终结果：

Answer 2

略微修改@VividD答案。

有可能（nvd3 v 1.8.1）仅修改工具提示中的值（不是所有文本）：

var total = 0;
data.forEach(function (d) {
    total = total + d.value;
});

chart.tooltip.valueFormatter(function(d){
    return (d * 100/total).toFixed() + ' %';
});

示例：http://jsfiddle.net/mq56p4zk/4/

Answer 3

与workgena类似，这对我有用。

chart.tooltip.valueFormatter(function(d){
    return (d +' %');
});