如何获取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饼图工具提示中的百分比？

回答

相关问题