javascript - 如何在 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>

数据

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

最终结果: