バーのデータセット値の表示ChartJs 2.1.6

Question

chartjsのバージョンが変更されたため、バー自体のデータセット値の表示が機能しません。既存のコードは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