Chart.js scriptable options如何正确读取dataset中数据对象的指定属性？

问题根因 #

Chart.js的脚本化选项回调会在多个场景触发（除了渲染数据点外，还包括图例渲染、全局样式计算等场景），部分场景下没有对应有效数据索引，直接访问原始数据对象属性会抛出异常导致逻辑中断，所以你直接读取temper属性的写法不生效。

解决方法 #

方法一：使用解析后数据（官方推荐） #

你已经配置了parsing.yAxisKey: 'temper'，Chart.js会自动将对应字段解析为y轴数值，直接通过context.parsed.y获取即可，不需要手动读取原始数据对象：

borderColor: function(context) {
    // 非数据点场景返回默认颜色
    if (!context.parsed) return 'green';
    const temper = context.parsed.y;
    return temper > 10 ? 'red' : 'green';
}

方法二：读取原始数据对象（适合需要访问其他自定义字段的场景） #

如果需要访问原始数据中的magnitude等其他字段，要先校验数据索引和对象是否存在，避免无数据场景下的属性访问报错：

borderColor: function(context) {
    // 校验索引和数据是否存在
    if (context.dataIndex === undefined || !context.dataset.data[context.dataIndex]) {
        return 'green';
    }
    const temper = context.dataset.data[context.dataIndex].temper;
    return temper > 10 ? 'red' : 'green';
}

额外配置修复提示 #

你当前x轴配置为type: 'time'且unit: 'day'，但你的数据time字段是08h00格式的小时级数据，且不是标准ISO时间格式，会导致x轴时间解析失败，建议补充配置：

scales: {
    x: {
        type: 'time',
        time: {
            unit: 'hour',
            parser: 'HH[h]mm' // 匹配你传入的08h00格式
        },
    },
}

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