问来自数组的图表js自定义数据标签

EN

var data1 = ['7.8', '5', '', '', '7.7', '7.8', '8.1', '7.8'];
var data2 = ['8', '8', '', '', '8', '8', '8', '8'];
var percentage = [];

function calculate() {
  for (let i = 0; i < 8; i++) {
    percentage.push(data1[i] / data2[i] * 100)
  }
}

calculate();
var canvas = document.getElementById('myChart');
var data = {
  labels: ['1','2','3','4','5','6','7','8'],
  datasets: [{
    //   xAxisID: "bar-x-axis2",
    data: data1,
    backgroundColor: ['#c3cd46', '#e31c24', '#FFFFFF', '#FFFFFF', '#c3cd46', '#267533', '#267533', '#267533'],
    datalabels: {
      display: false,
    },
  }, {
    data: data2,
    //  xAxisID: "bar-x-axis1",
    datalabels: {
      display: false,
    },
    backgroundColor: ['rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)', 'rgba(61, 146, 125, 1)'],
  }, {
    data: ['', '', '', '', '', '', '', '']
  }]
};
var option = {
  legend: {
    display: false,
  },
  tooltips: {
    enabled: false,
  },
  scales: {
    yAxes: [{
      scaleFontSize: 40,
      scaleLabel: {
        display: true,
      },
      ticks: {
        max: 10,
        min: 0,
        stepSize: 2,
        beginAtZero: true,
        callback: function(value) {
          return value + " h"
        }
      },
    }],
    xAxes: [{
      barThickness: 15,
      stacked: true,      
    }],
  },
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'top', 
      formatter: function(context) {

      },      
    }
  }
};

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: option
});