[英]How to display the percentage % on a NVD3 Pie Chart?
从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饼图工作。
据我所知,唯一的方法是编辑pieChart.js
。 从这里拉NVD3源,并在/ src / models /
打开pieChart.js
并添加编辑:
tooltip = function(key, y, e, graph) {
return '<h3>' + key + '</h3>' +
'<p>' + y + ' % </p>'
}
或者这是一个到pieChart.js的NVD3托管链接,编辑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>'
});
只是想让你更新答案。 所以现在你知道两种方法。
希望它能帮到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.