如何为Chart.js按Y轴值设置多行背景色？已实现单一背景色

Hey there! 看起来你已经搞定了单一背景色的实现，现在要升级成基于Y轴数值的分段背景，这个需求用Chart.js的插件就能轻松实现，我给你捋清楚步骤和代码：

核心思路 #

我们还是借助beforeDraw钩子，不过这次不再是绘制单一矩形，而是根据Y轴的数值分段，计算每个分段对应的画布像素位置，然后逐个填充不同颜色的矩形。Chart.js提供了getPixelForValue()方法，能帮我们快速把Y轴数值转换成画布上的坐标，不用手动计算刻度间距，非常方便。

完整实现代码 #

Chart.pluginService.register({
  beforeDraw: function(chart, easing) {
    // 获取画布上下文、图表区域和Y轴实例
    const ctx = chart.chart.ctx;
    const chartArea = chart.chartArea;
    // 这里的Y轴ID默认是'y-axis-0'，如果你的图表自定义了Y轴ID，记得替换
    const yAxis = chart.scales['y-axis-0'];

    // 定义Y轴分段规则：区间范围 + 对应背景色
    // 你可以根据自己的需求修改这些值
    const backgroundSegments = [
      { min: 0, max: 50, color: 'rgba(251, 85, 85, 0.2)' },
      { min: 50, max: 100, color: 'rgba(85, 251, 85, 0.2)' },
      { min: 100, max: 200, color: 'rgba(85, 85, 251, 0.2)' }
    ];

    ctx.save();

    // 遍历每个分段，绘制对应颜色的背景矩形
    backgroundSegments.forEach(segment => {
      // 把Y轴数值转换成画布像素坐标
      // 注意：默认Y轴顶部对应最大值，底部对应最小值，所以max的像素位置更靠上
      const topY = yAxis.getPixelForValue(segment.max);
      const bottomY = yAxis.getPixelForValue(segment.min);

      // 设置当前分段的填充色
      ctx.fillStyle = segment.color;
      // 绘制矩形：x从图表区域左边界开始，y从topY开始，宽度是图表区域宽度，高度是上下坐标差
      ctx.fillRect(chartArea.left, topY, chartArea.width, bottomY - topY);
    });

    ctx.restore();
  }
});

关键细节说明 #

• Y轴ID适配：如果你的图表配置里给Y轴设置了自定义ID（比如id: 'my-custom-y-axis'），记得把chart.scales['y-axis-0']替换成对应的ID。
• 动态适配Y轴范围：不管Y轴范围是固定还是随数据动态变化，getPixelForValue()都会自动计算正确的像素位置，所以分段背景会跟着Y轴自动调整。
• 分段规则自定义：你可以随意修改backgroundSegments里的min、max和color，支持任意数量的分段，甚至可以根据业务逻辑动态生成这个数组。
• 绘制顺序：因为我们在beforeDraw阶段绘制背景，所以图表的折线/柱状图会覆盖在背景上面，不会被遮挡。

使用注意 #

确保这个插件的注册代码放在你的图表初始化代码之前，这样Chart.js才能在绘制图表时触发这个钩子函数。

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