Chart.js 在每个条顶部添加数据时出错

我需要把Chart.JS的每个条的值放在上面。下面是脚本：

    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 = $("#barChart").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);
  }

var区域图表数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”、“八月”
，“九月”、“十月”、“十一月”、“十二月”]，
数据集：[
{
标签：“现金收入”，
strokeColor:“rgba（210、214、222、1）”，
pointColor:“rgba（210、214、222、1）”，
pointStrokeColor:#c1c7d1“，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：成本数据
}
]
};
var barChartCanvas=$（“#barChart”）.get（0.getContext（“2d”）；
var barChart=新图表（barChartCanvas）；
var barChartData=areaChartData；
barChartData.datasets[0].fillColor=“#00c0ef”；
barChartData.datasets[0].strokeColor=“#00c0ef”；
barChartData.datasets[0].pointColor=“#00a65a”；
var barChartOptions={
//布尔值-刻度是从零开始，还是从最低值向下一个数量级开始
scaleBeginAtZero:对，
//布尔值-是否在图表中显示网格线
scaleShowGridLines：对，
//字符串-网格线的颜色
scaleGridLineColor:“rgba（0,0,0,05）”，
//Number—网格线的宽度
scaleGridLineWidth:1，
//布尔值-是否显示水平线（X轴除外）
缩放水平线：对，
//布尔值-是否显示垂直线（Y轴除外）
scaleShowVerticalLines：没错，
//布尔-如果每个条上都有一个笔划
barShowStroke：是的，
//数字-条笔划的像素宽度
杆行程宽度：2，
//数字-每个X值集之间的间距
barValueSpacing:5，
//数字-X值内数据集之间的间距
barDatasetSpacing:1，
//字符串-图例模板
legendTemplate:“
”，
//布尔值-是否使图表响应
回答：是的，
维护Aspectratio：是的，
onAnimationComplete:函数（）{
var barChartData=this.chart.barChartData；
barChartData.font=this.scale.font；
barChartData.fillStyle=this.scale.textColor
barChartData.textAlign=“中心”；
barChartData.textBaseline=“底部”；
this.datasets.forEach（函数（数据集）{
dataset.bar.forEach（函数（bar）{
barChartData.fillText（bar.value、bar.x、bar.y-5）；
});
})
}
};
barChartOptions.datasetFill=false；
barChart.Bar（barChartData、barChartOptions）；
}

我总是会遇到这样的错误：

未捕获的TypeError:无法设置未定义的属性“font”

---

我不熟悉Chart.JS，不知道发生了什么。

您发布的问题在您的

onAnimationComplete

函数中

this.chart.barChartData

未定义，这就是代码开始失败的原因

不完全确定要执行的操作，但如果要删除那些试图编辑未定义属性的行，则将不再收到错误。但是就像我说的，从你的问题中不清楚你想要达到什么，所以除了这个，我不知道该建议什么

例如：

如果要在其中设置内容，您确实可以访问选项

this.options

和数据集

this.dataset