无法在条形图上看到值

Question

我有一个Chart.JS条形图，我需要在条形图上看到值，而不是将鼠标放在每个条形图上。

这是我的图表脚本，我从PHP通过AJAX获取数据并显示它们：

$.ajax
  ({
    url: 'stat_income_2.php',
    type: 'POST',
    data: {current_year: y},
    dataType: 'JSON',
    success:function(resp)
    {
      var costData = [];
      $.each(resp, function( key, row)
      {
        costData.push(row['cost']);
      });


        var areaChartData = {
          labels: ["January", "February", "March", "April", "May", "June", "July", "August"
          , "September", "October", "November", "December"],
          datasets: [
            {
              label: "Cash Income",
              strokeColor: "rgba(210, 214, 222, 1)",
              pointColor: "rgba(210, 214, 222, 1)",
              pointStrokeColor: "#c1c7d1",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: costData
            }
          ]
        };
        var barChartCanvas = $("#barChart2").get(0).getContext("2d");
        var barChart = new Chart(barChartCanvas);
        var barChartData = areaChartData;
        barChartData.datasets[0].fillColor = "#00c0ef";
        barChartData.datasets[0].strokeColor = "#00c0ef";
        barChartData.datasets[0].pointColor = "#00a65a";
        var barChartOptions = {
          //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
          scaleBeginAtZero: true,
          //Boolean - Whether grid lines are shown across the chart
          scaleShowGridLines: true,
          //String - Colour of the grid lines
          scaleGridLineColor: "rgba(0,0,0,.05)",
          //Number - Width of the grid lines
          scaleGridLineWidth: 1,
          //Boolean - Whether to show horizontal lines (except X axis)
          scaleShowHorizontalLines: true,
          //Boolean - Whether to show vertical lines (except Y axis)
          scaleShowVerticalLines: true,
          //Boolean - If there is a stroke on each bar
          barShowStroke: true,
          //Number - Pixel width of the bar stroke
          barStrokeWidth: 2,
          //Number - Spacing between each of the X value sets
          barValueSpacing: 5,
          //Number - Spacing between data sets within X values
          barDatasetSpacing: 1,
          //String - A legend template
          legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
          //Boolean - whether to make the chart responsive
          responsive: true,
          maintainAspectRatio: true,

          // onAnimationComplete: function () {

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

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

        barChartOptions.datasetFill = false;
        barChart.Bar(barChartData, barChartOptions);
      }
  });

我尝试the answer from this question，我将以下脚本添加到现有脚本中：

var myLine = new Chart(ctx).Line(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.points.forEach(function (points) {
                ctx.fillText(points.value, points.x, points.y - 10);
            });
        })
    }
});

但没有显示任何内容，我会翻过每个栏来查看值。任何帮助表示赞赏。