無法在條形圖上看到值

Question

我有一個Chart.JS條形圖，我需要看到條形圖上的值，而不是將鼠標懸停在每個條形圖上。

這是我的圖表腳本，我通過AJAX得到PHP數據並顯示出來：

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

但什麼也沒有顯示，我將滾動每個欄以查看值。任何幫助表示讚賞。

Answer 1

中庸之道替換您的註釋代碼

onAnimationComplete: function() { 
     var barChartData = this.chart.barChartData; 

通過

var barChartData = this.chart.ctx 

它應該工作。