如何獲取nvd3餅圖工具提示中的百分比？

我有一張nvd3餅圖。我正在獲取百分比值作爲標籤，但我希望它在工具提示中。下面是HTML：如何獲取nvd3餅圖工具提示中的百分比？

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

來源

2014-07-08 vipin

這是一個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);

最終結果是：

enter image description here

來源

2015-02-14 17:06:47 VividD

小號輕輕修改@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/

來源

2015-09-22 12:47:26 workgena

請您詳細說明您的答案，並在上面提供您所提供的解決方案的更多描述。 – abarisone

-1

類似workgena，這個這麼做是爲了我。

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

來源

2016-03-05 20:55:47 John

這隻會在值的後面添加百分號，看起來不像OP想要的。 –

如何獲取nvd3餅圖工具提示中的百分比？

回答

相關問題