Chart.js如何为Y轴设置不同颜色？尝试未果求解决方案

当然可以搞定这种Y轴按区间显示不同颜色的需求！你提到的chartjs-plugin-annotation只能处理背景确实不够用，但咱们可以借助Chart.js的自定义绘制能力来实现，下面给你两种可行的方案：

方案一：手动绘制分段轴（适合整条轴线分色） #

通过图表的afterDraw钩子，我们可以自己根据Y轴的数值范围，绘制不同颜色的轴线和刻度线。先把默认的轴线和网格线隐藏，然后手动绘制我们需要的分段样式：

示例代码 #

var config = {
  "type": "line",
  "data": {
    "labels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    "datasets": [{
      "label": 'Dataset',
      "data": [1,2,3,4,5,6,7],
      "fill": false,
    }]
  },
  "options": {
    "responsive": true,
    "scales": {
      "yAxes": [{
        "display": true,
        "scaleLabel": {
          "display": true,
          "labelString": "数值"
        },
        // 隐藏默认的网格线和轴线，我们自己绘制
        "gridLines": {
          "display": false
        },
        "ticks": {
          // 保留刻度文字，刻度线自己画
          "display": true
        }
      }]
    },
    "animation": {
      "duration": 0 // 关闭动画避免绘制闪烁
    }
  },
  "plugins": [{
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      
      // 定义颜色分段：[数值范围, 对应颜色]
      var colorSections = [
        { min: 0, max: 3, color: '#FF6B6B' }, // 红色区间
        { min: 3, max: 5, color: '#4ECDC4' }, // 青色区间
        { min: 5, max: 8, color: '#45B7D1' }  // 蓝色区间
      ];

      colorSections.forEach(section => {
        // 把数值转换成画布上的像素坐标
        var topY = yAxis.getPixelForValue(section.max);
        var bottomY = yAxis.getPixelForValue(section.min);
        
        ctx.save();
        ctx.strokeStyle = section.color;
        ctx.lineWidth = 2;

        // 绘制分段的Y轴竖线
        ctx.beginPath();
        ctx.moveTo(yAxis.left, topY);
        ctx.lineTo(yAxis.left, bottomY);
        ctx.stroke();

        // 绘制该区间的刻度线
        yAxis.ticks.forEach(tick => {
          var tickValue = parseFloat(tick);
          if (tickValue >= section.min && tickValue <= section.max) {
            var tickY = yAxis.getPixelForValue(tickValue);
            ctx.beginPath();
            ctx.moveTo(yAxis.left - 10, tickY); // 刻度线向左延伸10px
            ctx.lineTo(yAxis.left, tickY);
            ctx.stroke();
          }
        });
        ctx.restore();
      });
    }
  }]
};

// 初始化图表
new Chart(document.getElementById('myChart'), config);

方案二：通过刻度回调设置颜色（适合刻度/刻度线分色） #

如果你的需求只是让刻度文字和刻度线按数值区间变色，不需要整条轴线分段，那直接用Chart.js内置的回调函数就能搞定，不用手动绘制：

示例代码 #

var config = {
  "type": "line",
  "data": {
    "labels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    "datasets": [{
      "label": 'Dataset',
      "data": [1,2,3,4,5,6,7],
      "fill": false,
    }]
  },
  "options": {
    "responsive": true,
    "scales": {
      "yAxes": [{
        "display": true,
        "scaleLabel": {
          "display": true,
          "labelString": "数值"
        },
        "gridLines": {
          // 让刻度线按数值区间变色
          "color": function(context) {
            var value = context.tick.value;
            if (value <= 3) return '#FF6B6B';
            if (value <= 5) return '#4ECDC4';
            return '#45B7D1';
          }
        },
        "ticks": {
          // 让刻度文字按数值区间变色
          "fontColor": function(tick) {
            var value = tick.value;
            if (value <= 3) return '#FF6B6B';
            if (value <= 5) return '#4ECDC4';
            return '#45B7D1';
          }
        }
      }]
    }
  }
};

小提示 #

• 要是你需要的是整条Y轴竖线分段变色，选方案一；如果只是刻度和刻度线按值区分颜色，方案二更简单省心。
• 记得根据你实际的Y轴数值范围，调整代码里的区间和颜色值哦。
• 方案一中关闭动画是为了防止重绘时的闪烁，要是你需要保留动画，可以调整绘制逻辑或者加个防抖处理。

内容的提问来源于stack exchange，提问作者Stefan.N