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