NVD3.js - 如何将条形文本添加到堆叠图中的每个条形？
Vah*_*ahe 2 nvd3.js angular-nvd3
我在 NVD3/AngularJS 中创建了一个多条形图。我想在每个矩形条内显示文本及其值，如下面的 JSON 所示。
如何在每个条形图中向图形显示文本值？
NVD3 图表定义
multiBarChart: {
options: function(){
return {
chart: {
type: 'multiBarChart',
stacked: true,
x: function(d){return d.x;},
y: function(d){return d.y;},
text: function(d){return d.x;},
showLabels: true,
showLegend: false,
transitionDuration: 500,
forceX: ["Team", "Meeting", "Phase", "Source"],
xAxis: {
axisLabel: 'Category',
axisLabelDistance: -8
},
yAxis: {
axisLabel: 'Number Of Action Items',
}
}
}
},
data: categoryChartData
}
JSON 数据 (categoryChartData)
[
{"values" : [
{
"y" :10,
"x" : "Team"
}, {
"y" : 0,
"x" : "Meeting"
},
{
"y" :0,
"x" : "Phase"
}, {
"y" : 0,
"x" : "Source"
}
],
"key" : "Team1"
},
{"values" : [
{
"y" :5,
"x" : "Team"
}, {
"y" : 0,
"x" : "Meeting"
},
{
"y" :0,
"x" : "Phase"
}, {
"y" : 0,
"x" : "Source"
}
],
"key" : "Team2"
},
{"values" : [
{
"y" :0,
"x" : "Team"
}, {
"y" : 7,
"x" : "Meeting"
},
{
"y" :0,
"x" : "Phase"
}, {
"y" : 0,
"x" : "Source"
}
],
"key" : "Meeting1"
},
{"values" : [
{
"y" :0,
"x" : "Team"
}, {
"y" : 3,
"x" : "Meeting"
},
{
"y" :0,
"x" : "Phase"
}, {
"y" : 0,
"x" : "Source"
}
],
"key" : "Meeting2"
},
{"values" : [
{
"y" :0,
"x" : "Team"
}, {
"y" : 0,
"x" : "Meeting"
},
{
"y" :9,
"x" : "Phase"
}, {
"y" : 0,
"x" : "Source"
}
],
"key" : "Phase1"
},
{"values" : [
{
"y" :0,
"x" : "Team"
}, {
"y" : 0,
"x" : "Meeting"
},
{
"y" :5,
"x" : "Phase"
}, {
"y" : 0,
"x" : "Source"
}
],
"key" : "Phase1"
},
{"values" : [
{
"y" :0,
"x" : "Team"
}, {
"y" : 0,
"x" : "Meeting"
},
{
"y" :0,
"x" : "Phase"
}, {
"y" : 2,
"x" : "Source"
}
],
"key" : "Internal"
},
{"values" : [
{
"y" :0,
"x" : "Team"
}, {
"y" : 0,
"x" : "Meeting"
},
{
"y" :0,
"x" : "Phase"
}, {
"y" : 1,
"x" : "Source"
}
],
"key" : "Customer"
}
];
由于动画堆叠条形图的一些复杂性，Angular-nvd3 本身不会为多条形图执行此操作，但对于离散条形图，正如之前的 stackoverflow 问题所探讨的那样。但是，在他对该问题的回答的更新中，@Topicus 链接到了他/她所写的可实现您正在寻找的内容的要点。
我根据你的情况调整了要点；你可以在这个 plunker 中看到结果。如果标签显示有点不稳定，您可以稍微调整一下格式。关键是动画完成后需要附加标签，所以我设置的超时时间等于（也可以稍大于）transitionDuration 图表属性的值。我还删除了所有零值，因此它们不会掩盖非零值。
$scope.options = {
chart: {
type: 'multiBarChart',
height: 500,
transitionDuration: 500,
...
}
};
$scope.data...
$timeout(function () {
d3.selectAll('.nv-multibar .nv-group').each(function(group){
var g = d3.select(this);
// Remove previous labels if there is any
g.selectAll('text').remove();
g.selectAll('.nv-bar').each(function(bar){
var b = d3.select(this);
var barWidth = b.attr('width');
var barHeight = b.attr('height');
g.append('text')
// Transforms shift the origin point then the x and y of the bar
// is altered by this transform. In order to align the labels
// we need to apply this transform to those.
.attr('transform', b.attr('transform'))
.text(function(){
// No decimals format and eliminate zero values
if (bar.y === 0) {
return;
}
return parseFloat(bar.y).toFixed(0);
})
.attr('y', function(){
// Center label vertically
var height = this.getBBox().height;
return parseFloat(b.attr('y')) + 15; // 15 is the label's margin from the top of bar
})
.attr('x', function(){
// Center label horizontally
var width = this.getBBox().width;
return parseFloat(b.attr('x')) + (parseFloat(barWidth) / 2) - (width / 2);
})
.style("stroke","black")
.attr('class', 'bar-values');
});
});
}, 500);
希望这有助于您入门。