在條形圖上顯示數據集值ChartJs 2.1.6

Question

根據圖表版本的更改，數據集本身在條形圖上顯示的值無法正常工作。現有的代碼已與V1.0.2一起使用。 編號：how to display data values on Chart.js

var ctx = document.getElementById("myChart2").getContext("2d"); 
 
var myBar = new Chart(ctx).Bar(chartData, { 
 
    showTooltips: false, 
 
    onAnimationComplete: function() { 
 

 
     var ctx = this.chart.ctx; 
 
     ctx.font = this.scale.font; 
 
     ctx.fillStyle = this.scale.textColor 
 
     ctx.textAlign = "center"; 
 
     ctx.textBaseline = "bottom"; 
 

 
     this.datasets.forEach(function (dataset) { 
 
      dataset.bars.forEach(function (bar) { 
 
       ctx.fillText(bar.value, bar.x, bar.y - 5); 
 
      }); 
 
     }) 
 
    } 
 
});

現在會是怎樣的修改必須以ChartJs V2.1.6工作嗎？ 當前條形圖語法與V2.1.6一起使用，如下所示。

 var myBarChart = new Chart(ctx, { 
 
      type: 'bar', 
 
      data: datasets, 
 
      options: { 
 
       responsive: true, 
 
       tooltips: { 
 
        enabled: false 
 
       }, 
 
       legend: { 
 
        display: false 
 
       }, 
 
       //what should add to display values on bar? 
 
      } 
 
     });

Answer 1

通過使用animation.onComplete密鑰，如下所示：

animation: { 
     duration: 500, 
     onComplete: function() { 
      var ctx = this.chart.ctx; 
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
      ctx.fillStyle = "black"; 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = 'bottom'; 

      this.data.datasets.forEach(function(dataset) { 
       for (var i = 0; i < dataset.data.length; i++) { 
        for (var key in dataset._meta) { 
         var model = dataset._meta[key].data[i]._model; 
         ctx.fillText(dataset.data[i], model.x, model.y - 5); 
        } 
       } 
      }); 
     } 
    } 

http://www.chartjs.org/docs/#chart-configuration-animation-configuration