Chart.js 3.x 版本移除了旧版的 zeroLineColor 等配置项，改用可脚本化的 grid.color 函数统一控制坐标轴网格线（包括主轴线、零线及刻度线）的颜色，本文详解其正确用法与实用技巧。
chart.js 3.x 版本移除了旧版的 `zerolinecolor` 等配置项，改用可脚本化的 `grid.color` 函数统一控制坐标轴网格线（包括主轴线、零线及刻度线）的颜色，本文详解其正确用法与实用技巧。
在 Chart.js v3 及更高版本中，坐标轴样式已全面重构为“脚本化选项（scriptable options）”，传统静态属性（如 zeroLineColor、gridLines.color）已被弃用。若你发现 x 轴或 y 轴在深色背景上难以辨识，核心解决方式是通过 scales.{axis}.grid.color 配置一个返回颜色字符串的函数——该函数接收当前网格线对象（含 index、tick、bounds 等属性），支持精细化着色逻辑。
例如，以下配置将 y 轴的零基准线（即 y=0 所在的网格线）设为醒目的红色，其余网格线保持浅灰透明：
options: {
scales: {
y: {
grid: {
color: (line) => line.index === 0 ? '#e53e3e' : 'rgba(0, 0, 0, 0.08)'
}
},
x: {
grid: {
// 同理可定制 x 轴：让首尾刻度线加粗/变色，或隐藏中间线
color: (line) => {
const isFirst = line.index === 0;
const isLast = line.index === line.tickCount - 1;
return isFirst || isLast ? '#4299e1' : 'rgba(0, 0, 0, 0.04)';
}
}
}
}
}
⚠️ 注意事项：
-
line.index === 0对应的是坐标轴基线（baseline），即数值为 0 的那条线（对 y 轴而言是横轴；对 x 轴而言是纵轴），而非第一个刻度线——这正是替代旧版zeroLineColor的关键逻辑； - 若需突出显示某条特定数值线（如 y=100），应结合
ticks.callback与grid.drawOnChartArea: false配合自定义线，或使用plugins.annotation插件； -
grid.color函数中可安全访问line.tick（对应刻度值）、line.index（从 0 开始的序号）、line.tickCount（总刻度数）等属性，便于实现条件渲染； - 若要完全隐藏非零网格线，返回
'transparent'或'rgba(0,0,0,0)'即可，但注意这不影响坐标轴本身（border）的显示。
总结：Chart.js v3+ 的轴线定制更灵活也更精准。掌握 grid.color 的函数式写法，不仅能复现旧版功能，还能实现动态主题适配、数据驱动高亮等高级效果——告别硬编码，拥抱脚本化配置。
