我一直在尝试在 NVD3 Pie Chart 上显示百分比，但我不知道该怎么做...我正在寻找类似 @987654322@ 的内容
首先，是否有图表选项或方法可以在饼图的每个部分内部显示某些内容？如果是，是否可以选择显示百分比而不是确切值？
谢谢，周末愉快！
【问题讨论】：
标签： javascript d3.js pie-chart nvd3.js
从 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;
});
【讨论】：
我假设您已经能够让示例 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 页面中添加脚本，以便在加载 nvd3.js 时覆盖继承的 pieChart 设置
<script src="your/path/to/pieChart.js" type="application/javascript"></script>
更新：
您知道，您传递到图表中的数据将按原样呈现，您将进行百分比计算并将其传递到图表中。饼图切片大小将根据您发送到图表中的数据进行计算。只是让你知道，不管你是否已经知道。
更新日期：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>'
});
只是想让你更新答案。所以现在你知道了两种方法。
希望对你有帮助。
【讨论】：