本文详解如何在 Chart.js（v3+）中根据对应数据值是否大于 0，动态为 X 轴标签设置 font.weight，解决 ticks.callback 返回对象导致渲染失败（显示 [object Object]）的问题，并提供可靠、简洁的官方推荐方案。
本文详解如何在 chart.js（v3+）中根据对应数据值是否大于 0，动态为 x 轴标签设置 `font.weight`，解决 `ticks.callback` 返回对象导致渲染失败（显示 `[object object]`）的问题，并提供可靠、简洁的官方推荐方案。
在 Chart.js 中，对 X 轴标签进行条件格式化（例如：仅当对应数据值 > 0 时加粗显示）是一个常见需求，但容易踩坑——尤其是误用 ticks.callback 返回复杂对象。你遇到的 "[object Object]" 渲染异常，正是因为 Chart.js 的 callback 函数必须返回字符串（label 文本），而你返回了 { text: 'xxx', font: {...} } 这类对象，导致底层调用 String({}) 得到默认字符串表示。
✅ 正确做法是：分离关注点 ——
- 用
ticks.callback仅负责返回 label 文本内容（纯字符串）； - 用
ticks.font.weight（支持函数）单独控制字体粗细，该函数接收context参数（含index,tick,label等），可安全访问data[context.index]。
以下是完整、可直接使用的配置示例（适配 Chart.js v3.9+）：
options: {
animation: false,
scales: {
x: {
grid: { display: false },
ticks: {
// ✅ 正确：callback 只返回字符串
callback: function(context) {
return context.label; // 或 labels[context.index]（若 labels 是独立数组）
},
// ✅ 关键：font.weight 接收函数，动态返回 'bold' 或 'normal'
font: {
weight: function(context) {
// 注意：确保 data 是数值数组，且 context.index 有效
const value = data[context.index];
// 安全处理：字符串数字需转为数值（如 "3" → 3）
const numValue = typeof value === 'string' ? parseFloat(value) : value;
return numValue > 0 ? 'bold' : 'normal';
}
}
}
}
}
}
? 重要注意事项：
-
ticks.font.weight函数在 Chart.js v3+ 中原生支持，无需额外插件； -
context.index对应当前 tick 在labels数组中的索引，务必确保data和labels长度一致、顺序对应； - 若
data中存在字符串数值（如"3"），需显式转换为数字（parseFloat()或Number()），否则"3" > 0为true（字符串比较逻辑），但"03" > 0也可能意外为true； - 避免在
callback中返回对象、数组或非字符串值，否则必然触发[object Object]渲染错误； - 如需同时控制颜色、大小等样式，
font.size、color等也支持同模式的函数写法。
? 进阶提示：若需更精细控制（如不同阈值、多条件），可将判断逻辑封装为独立函数，提升可读性与复用性：
const getFontWeight = (index) => {
const val = Number(data[index]);
if (val > 5) return 'bolder';
if (val > 0) return 'bold';
return 'normal';
};
// 在配置中使用：
font: { weight: (ctx) => getFontWeight(ctx.index) }
通过这种结构化、符合 Chart.js 设计规范的方式，你既能精准实现数据驱动的视觉强调，又能保障图表稳定渲染——告别调试日志中的 "[object Object]"，让周三的 “Wednesday” 真正以加粗姿态清晰呈现。
