Jak uzyskać wartość procentową w podpowiedziach wykresu kołowego nvd3?

Question

Mam wykres kołowy nvd3. Otrzymuję wartość procentową jako etykiety, ale chcę ją w etykiecie narzędzia. Oto 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> 

DANE

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

tutaj jest funkcja podpowiedzi do pokazywania klucz jako tooltip-danych.

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

Answer 1

Oto jsfiddle, który pokazuje procent etykiet narzędzi.

Kod klucz to: (trzeba obliczyć sumę wszystkich wartości, które zawierają wykres kołowy)

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

Ponadto, należy dodać następującą linię podczas tworzenia wykresu NVD3, jak już wiesz:

.tooltipContent(tp); 

wynik końcowy:

Answer 2

S lekko zmodyfikowana odpowiedź @VividD.

jest możliwe (nvd3 V 1.8.1) modyfikacji tylko wartość podpowiedzi (nie cały tekst):

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

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

przykład: http://jsfiddle.net/mq56p4zk/4/

Answer 3

podobne do workgena ten sam go mnie.

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