如何基于刻度值设置Chart.js刻度标签颜色——负值设为红色

要实现Y轴负值刻度标红，同时把-1转成(1)、-2转成(2)的需求，直接用Chart.js Y轴配置里的ticks.callback和ticks.color两个回调函数就能搞定——完全基于刻度数值判断，不用依赖索引或位置。

完整配置示例（柱状图/折线图通用） #

// 初始化图表（type设为'bar'是柱状图，'line'是折线图）
const myChart = new Chart(document.getElementById('chart-container'), {
  type: 'bar',
  data: {
    labels: ['一月', '二月', '三月', '四月', '五月'],
    datasets: [{
      label: '业务数据',
      data: [4, -1, 3, -2, 0],
      // 其他数据集样式配置
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          // 处理刻度标签的文本格式
          callback: function(value) {
            // 负值转成(绝对值)格式，非负数直接返回原数值
            return value < 0 ? `(${Math.abs(value)})` : value;
          },
          // 处理刻度标签的颜色
          color: function(context) {
            // 从context中获取当前刻度的数值，负值设为红色，其他用默认深灰
            return context.tick.value < 0 ? 'red' : '#333';
          }
        }
      }
    }
  }
});

关键部分说明 #

1. ticks.callback：负责修改刻度的显示文本。它会接收每个刻度的原始数值value，我们只需要判断数值是否为负，若是则取绝对值并用括号包裹，否则直接返回原数值。
2. ticks.color：负责设置刻度的颜色。它接收一个context对象，通过context.tick.value拿到当前刻度的数值，判断为负时返回红色，其他情况可以自定义默认颜色（这里用深灰色#333）。

这个逻辑不管Y轴刻度是自动生成还是手动设置（比如通过min、max、stepSize指定范围），都会对每个刻度的数值做判断，完全适配你的需求。

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