如何在Chart.js条形图中添加左/右填充？

// 引入Chart.js库
import Chart from 'chart.js';

// 创建Canvas元素
const canvas = document.getElementById('myChart');

// 创建数据对象
const data = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  datasets: [{
    label: '数据集',
    data: [10, 20, 30, 40, 50],
    backgroundColor: 'rgba(0, 123, 255, 0.5)', // 设置条形图的颜色
  }]
};

// 创建条形图实例
const chart = new Chart(canvas, {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      beforeDraw: function(chart) {
        const ctx = chart.ctx;
        const xAxis = chart.scales['x-axis-0'];
        const yAxis = chart.scales['y-axis-0'];
        
        // 左填充
        ctx.fillStyle = 'rgba(255, 0, 0, 0.3)'; // 设置填充颜色
        ctx.fillRect(xAxis.left, yAxis.top, 50, yAxis.bottom - yAxis.top); // 设置填充矩形的位置和大小
        
        // 右填充
        ctx.fillStyle = 'rgba(0, 255, 0, 0.3)'; // 设置填充颜色
        ctx.fillRect(xAxis.right - 50, yAxis.top, 50, yAxis.bottom - yAxis.top); // 设置填充矩形的位置和大小
      }
    }
  }
});