如何在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; 
});