如何在调整Chart.js /画布大小时修复背景渐变

// 创建Chart.js实例
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false // 禁止Chart.js自动调整画布大小
  }
});

// 监听画布容器元素的大小变化
var canvasContainer = document.getElementById('canvasContainer');
var resizeObserver = new ResizeObserver(function(entries) {
  for (var entry of entries) {
    var contentRect = entry.contentRect;
    // 更新画布大小
    myChart.canvas.parentNode.style.width = contentRect.width + 'px';
    myChart.canvas.parentNode.style.height = contentRect.height + 'px';
    // 更新Chart.js实例
    myChart.update();
  }
});
resizeObserver.observe(canvasContainer);

// 在beforeDraw钩子函数中重新绘制背景渐变
Chart.plugins.register({
  beforeDraw: function(chart) {
    var ctx = chart.chart.ctx;
    var chartArea = chart.chartArea;
    var gradient = ctx.createLinearGradient(chartArea.left, chartArea.top, chartArea.right, chartArea.bottom);
    gradient.addColorStop(0, 'rgba(255, 99, 132, 0.2)');
    gradient.addColorStop(1, 'rgba(54, 162, 235, 0.2)');
    chart.chart.config.data.datasets[0].backgroundColor = gradient;
  }
});