Question

我需要将 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);
  }

我总是得到这个错误：

未捕获的TypeError：无法设置属性＆＃39; font＆＃39;未定义的

我是 Chart.JS 的新手，并且不知道发生了什么。

Answer 1

您的问题出在onAnimationComplete函数中。 this.chart.barChartData是undefined，这就是代码开始失败的原因。

不完全确定您要执行的操作但是如果要删除那些尝试编辑未定义属性的行，则不会再收到错误。但就像我说的那样，从你的问题中我不清楚你想要实现什么，除此之外，我不知道该建议什么。

例如： https://jsfiddle.net/leighking2/f3oec1rL/

如果您想在其中设置内容，您可以访问选项this.options和数据集this.datasets吗？

在每个栏顶部添加数据时出错

1 个答案: