Wie zeigt man die Werte von Balken oben auf jedem Balken in nvd3 angular multibarchart?

Question

Ich habe mit showValues ​​versucht: wahr in den Optionen, aber kein Glück. Dies ist die Bibliothek http://krispo.github.io/angular-nvd3/#/ showValues ​​funktioniert auf diskreten Balkendiagramm, aber nicht auf Multibarchart. This is the expected output

Answer 1

Dieser Code ist für mich gearbeitet.

1) rufen eine Funktion (setOnTopLabel();) nach dem Diagramm Option konfiguriert.

2) fügen Sie diese Funktion in Ihrem js-Code hinzu.

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); 
     }