Chart.js如何根据y轴刻度值是否大于/小于0设置多种刻度颜色

你之前的写法存在两个核心问题：

• ticks.callback 仅用于自定义刻度显示的文本内容，无法返回颜色控制样式
• fontColor 直接传入静态数组无法匹配动态刻度值的颜色需求

你可以根据你使用的Chart.js版本，选择对应的配置方案： #

适用于Chart.js v3/v4（当前主流版本） #

v3及以上版本调整了坐标轴配置结构，刻度颜色通过color属性配置，支持传入回调函数动态计算：

scales: {
  y: {
    ticks: {
      color: function(context) {
        const value = context.tick.value;
        if (value === 0) return 'black';
        return value > 0 ? 'green' : 'red';
      },
      // 如果需要自定义刻度文本，额外保留callback配置即可
      // callback: function(value) { return value + ' 单位' }
    }
  }
}

适用于Chart.js v2版本 #

v2版本通过yAxes数组配置坐标轴，刻度颜色用fontColor属性传入回调：

scales: {
  yAxes: [{
    ticks: {
      fontColor: function(value) {
        if (value === 0) return 'black';
        return value > 0 ? 'green' : 'red';
      }
    }
  }]
}

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