如何在NVD3饼图上显示百分比％？

Question

我一直在试图显示在NVD3 Pie Chart的百分比，但我看不出怎么办呢？我正在寻找类似this

首先，是有一个图形选项或方式显示里面饼图的每个部分？如果是，是否有显示百分比而不是确切值的选项？

谢谢你，享受你的周末！

Answer 1

我假设你已经能够获得样品NVD3 Pie Chart的工作。

据我所知，唯一的办法是编辑pieChart.js。从here拉NVD3源，并且在/ src/models /开拓pieChart.js并添加编辑：

tooltip = function(key, y, e, graph) { 
     return '<h3>' + key + '</h3>' + 
       '<p>' + y + ' % </p>' 
     } 

或者这里是一个NVD3托管链接pieChart.js，编辑line 19看起来像这样'<p>' + y + '</p>'

请务必在您的html页面中添加脚本，以便在加载时支持pieChart设置nvd3.js <script src="your/path/to/pieChart.js" type="application/javascript"></script>

UPDATE：

只要你知道，你传递到图表的数据将呈现为是，你将不得不做出百分比计算，并将其传递到图表。饼图切片大小将根据您发送到图表的数据进行计算。只是告诉你，如果你已经知道了，就不要理会。

更新：2013年7月30日

我只是偶然发现了编辑工具提示，而不与pieChart.js文件修修补补的正确途径。

var chart = nv.models.pieChart().x(function(d) { 
    return d.key; 
}).y(function(d) { 
    return d.daily[0].sales; 
}).showLabels(true).values(function(d) { 
    return d; 
}).color(d3.scale.aColors().range()).donut(true).tooltips(true).tooltip(function(key, x, y, e, graph) { 
    return '<h3>' + key + ' Custom Text Here ' + x + '</h3> here' + '<p> or here ,' + y + '</p>' 
}); 

只是想让你更新答案。所以现在你知道两种做法。

希望它可以帮助你。

Answer 2

由于NVD3的1.1.10版本，可以调整标签

的类型，只要打电话chart.pie.labelType("percent");标记每个切片与相应的百分比。也可以显示每个片的密钥labelType("key")或值labelType("value")。

完整的示例：

var slices = [ 
    {name:"Part 1",value:23}, 
    {name:"Part 2",value:38}, 
    {name:"Part 3",value:67} 
]; 

nv.addGraph(function() { 
    var chart = nv.models.pieChart() 
     .x(function(d) { return d.name }) 
     .y(function(d) { return d.value }) 
     .color(d3.scale.category10().range()) 
     .width(300) 
     .height(300); 

    chart.pie.pieLabelsOutside(false).labelType("percent"); 

    d3.select("#chart") 
     .datum(slices) 
     .transition().duration(1200) 
     .attr('width', 300) 
     .attr('height', 300) 
     .call(chart); 

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); 

    return chart; 
});