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