如何实现：关联数据大于0时将X轴标签设为粗体？

问题分析 #

你当前的错误核心在于：ticks.callback函数仅支持返回字符串作为标签文本，返回对象会被强制转成[object Object]，这就是标签显示异常的原因。另外，标签的样式（如字体粗细、颜色）需要通过ticks的脚本化选项（Scriptable Options）单独配置，不能在callback里通过返回对象实现。

同时从控制台日志能看到，Wednesday对应的数据是字符串类型的"3"，虽然直接用data[index] > 0能判断，但建议先转成数字避免潜在问题，比如Number(data[index]) > 0。

正确实现代码 #

以下是修改后的完整配置，通过脚本化选项分别控制字体粗细和标签文本：

options: {
    animation: false,
    scales: {
        x: {
            grid: {
                display: false
            },
            ticks: {
                // 仅负责返回标签文本，保持原有逻辑即可
                callback: function(index) {
                    return labels[index];
                },
                // 脚本化选项：根据对应数据设置字体粗细
                font: {
                    weight: function(context) {
                        const dataValue = Number(data[context.tick.index]);
                        return dataValue > 0 ? 'bold' : 'normal';
                    }
                },
                // 统一设置标签颜色（按需调整）
                color: '#333'
            }
        }
    }
}

关键说明 #

• ticks.font.weight支持传入函数（脚本化选项），函数接收context参数，通过context.tick.index获取当前标签对应的索引，进而判断对应数据值来返回字体粗细。
• 把数据转成数字类型Number(data[context.tick.index])，避免字符串与数字比较的潜在逻辑问题。
• ticks.callback只负责返回文本内容，样式逻辑拆分到对应脚本化选项中，确保标签正常显示的同时实现条件格式化。

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