ChartJS注解插件问题：如何让图表线条显示在不透明注解框上方？

• 核心问题出在注解框的绘制时机：你当前设置的drawTime: "afterDraw"会让注解在所有图表元素（包括线条）绘制完成后再渲染，自然会遮挡线条。
• 把drawTime调整为beforeDatasetsDraw，注解框会先于数据集（图表线条）绘制，这样线条就能直接叠在不透明的注解框上方，无需降低透明度。

修改后的代码示例：

box1: {
    type: "box",
    drawTime: "beforeDatasetsDraw", // 关键修改
    yMin: 22,
    yMax: 40,
    backgroundColor: "rgba(255, 229, 153, 1)", // 设为完全不透明
    borderColor: "rgba(100, 100, 100, 1)",
},

补充说明：

• 注解插件的z属性仅控制多个注解之间的层级关系，无法改变注解与数据集的绘制顺序，所以之前调整z无效。
• ChartJS的渲染生命周期顺序为：beforeDraw → beforeDatasetsDraw → 绘制数据集 → afterDatasetsDraw → afterDraw，选择beforeDatasetsDraw是最精准的时机，既保证注解处于背景层，又不会干扰其他UI元素。

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