Chart.js v2.9折线图填充Y轴区间背景色效果异常如何解决？

你当前代码直接将hBar配置里的Y轴区间数值（0/20/28/100）当作画布像素坐标传入fillRect方法，没有做Y轴数值到画布实际像素坐标的映射转换，同时没有适配Canvas画布坐标从上到下像素值递增、和Y轴数值递增方向相反的特性，导致背景色块位置完全不符合预期。

修改插件代码，调用Chart.js内置的getPixelForValue方法完成数值到像素的转换，调整色块位置计算逻辑：

[{ 
  beforeDraw: function (chart, easing) { 
    let config = chart.config; 
    if (chart.ctx && config.dragen?.hBars) { 
      var ctx = chart.ctx; 
      var chartArea = chart.chartArea;
      // 获取Y轴实例，v2.9默认Y轴ID为y-axis-0，如果你自定义了Y轴ID请替换为对应值
      var yAxis = chart.scales['y-axis-0'];

      for (const hBar of config.dragen.hBars) { 
        // Y轴数值转画布像素，注意数值越大像素值越小
        var pixelTop = yAxis.getPixelForValue(hBar.to);
        var pixelBottom = yAxis.getPixelForValue(hBar.from);
        ctx.save(); 
        ctx.fillStyle = hBar.color; 
        // 参数依次为：左边界、上边界、宽度、高度
        ctx.fillRect(chartArea.left, pixelTop, chartArea.right - chartArea.left, pixelBottom - pixelTop); 
        ctx.restore(); 
      } 
    } 
  } 
}]

• 如果你自定义了Y轴的ID，需要将代码里的y-axis-0替换为你自己设置的Y轴ID
• 如果Y轴是反向刻度，可以直接交换hBar.to和hBar.from的位置即可适配

内容的提问来源于stack exchange，提问作者BioInfoBrett