如何在 nvd3 角度多条形图中每个条形图的顶部显示条形值？

Question

我尝试在选项中使用 showValues: true 但没有运气。 这是图书馆http://krispo.github.io/angular-nvd3/#/ showValues 适用于离散条形图，但不适用于多条形图。This is the expected output

Answer 1

这段代码对我有用。

1)在图表选项之后调用函数(setOnTopLabel();) 配置。

2)在你的js代码中添加这个函数。

function setOnTopLabel() {
            $timeout(function () {
                debugger;
                d3.selectAll('.nv-multibar .nv-group').each(function (group) {
                    debugger;
                    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 () {
                                    // Two decimals format
                                    return parseFloat(bar.y);
                                })
                                .attr('y', function () {
                                    // Center label vertically
                                    var height = this.getBBox().height;
                                    return parseFloat(b.attr('y')) - 10; // 10 is the label's magin from the bar
                                })
                                .attr('x', function () {
                                    // Center label horizontally
                                    var width = this.getBBox().width;
                                    return parseFloat(b.attr('x')) + (parseFloat(barWidth) / 2) - (width / 2);
                                }).style("fill", "black").style('stroke-width', "10").style('fill-opacity', "100");
                    });
                });
            }, 1000);
        }