Chart.js 2.8.0结合annotation插件时间戳区间盒状标注异常

核心问题原因 #

你当前用的Chart.js 2.8.0和chartjs-plugin-annotation 0.5.7版本，对时间轴标注的xMin/xMax值格式有严格要求：不能直接用秒级Unix时间戳，也无法识别Day.js对象，必须转换成毫秒级时间戳或原生Date对象，否则插件没法正确映射到时间轴上的位置。

具体解决方法 #

1. 转换时间戳格式 #

如果你的linkedTime和unlinkedTime是秒级Unix时间戳，直接乘以1000转为毫秒级；本身是毫秒级就直接用。

2. 处理xMax为null的场景 #

当unlinkedTime为null时，把xMax设为当前时间的毫秒级时间戳（Date.now()），实现“持续到当前”的效果。

3. 匹配轴ID #

确保标注的xScaleID和图表x轴的ID完全对应，多轴场景下要注意索引正确性。

修改后的代码示例 #

标注生成代码 #

annotations.push({
    type: 'box',
    id: `status-${index}`,
    xScaleID: `x-axis-${index}`,
    yScaleID: `y-axis-${index}`,
    backgroundColor: 'rgba(188, 170, 164, 0.2)',
    borderWidth: 0,
    // 秒级转毫秒级时间戳
    xMin: data.linkedTime * 1000,
    // 处理null，默认用当前时间
    xMax: data.unlinkedTime ? data.unlinkedTime * 1000 : Date.now(),
    label: {
        enabled: true,
        fontSize: 12,
        drawTime: 'afterDraw',
        content: data.name,
        xAdjust: 0,
        yAdjust: 0,
        position: 'top'
    }
});

备选方案（用Date对象） #

如果毫秒级时间戳仍不生效，可以尝试传入原生Date对象：

xMin: new Date(data.linkedTime * 1000),
xMax: data.unlinkedTime ? new Date(data.unlinkedTime * 1000) : new Date(),

额外验证项 #

• 确认x轴配置的type确实为'time'
• 若x轴自定义了id，要保证标注的xScaleID与该值完全一致（未自定义时默认是x-axis-0、x-axis-1这类格式）

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