Chart.js反转Y轴后如何修正背景色填充方向？

我之前也碰到过这个一模一样的问题！当你反转Y轴刻度后，Chart.js默认的背景填充逻辑会跟着轴的方向反转，导致填充区域和预期完全相反。这里有个实用的解决办法，通过自定义插件手动控制填充区域：

自定义beforeDraw插件绘制正确的背景填充 #

你可以利用Chart.js的插件系统，在图表绘制前手动计算并绘制符合预期的背景填充。这个方法能完全控制填充范围，不受轴方向的影响：

const chart = new Chart(ctx, {
  type: 'line', // 替换成你实际使用的图表类型
  data: { /* 你的数据集配置 */ },
  options: {
    scales: {
      y: {
        reverse: true, // 你设置的Y轴反转配置
      }
    },
    plugins: [{
      beforeDraw: function(chart) {
        const ctx = chart.ctx;
        const yAxis = chart.scales.y;
        const xAxis = chart.scales.x;
        
        // 替换成你的实际边界线数值（比如基准线、阈值）
        const baselineValue = 0;
        // 将边界线数值转换为画布上的像素位置
        const baselinePixel = yAxis.getPixelForValue(baselineValue);
        
        ctx.save();
        // 设置你想要的背景填充颜色
        ctx.fillStyle = 'rgba(54, 162, 235, 0.2)';
        
        // 因Y轴反转，填充区域从边界线像素延伸到X轴底部
        ctx.fillRect(
          xAxis.left, // 填充区域左边界
          baselinePixel, // 填充区域上边界（对应边界线）
          xAxis.width, // 填充区域宽度
          xAxis.bottom - baselinePixel // 填充区域高度（到X轴底部）
        );
        ctx.restore();
      }
    }]
  }
});

代码说明 #

• getPixelForValue方法可以帮你把Y轴数值转换为画布像素位置，不管轴是否反转都能精准计算。
• 由于Y轴反转后，画布Y坐标和轴刻度方向相反，所以我们需要填充的是从边界线像素向下到X轴底部的区域，而非向上到图表顶部。

如果你用的是带填充的折线/面积图（数据集设置了fill: true），同样可以用这个思路覆盖默认填充逻辑——要么在插件里绘制自定义填充区域，要么修改数据集的fill目标为计算好的像素位置。

这个方案是社区里应对这类问题的常用方式，毕竟官方文档确实没专门针对反转轴后的填充做详细说明，自定义插件能灵活解决这类边缘场景。

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