如何让ChartJS自定义插件优先于Tooltip插件执行？

问题背景 #

我为ChartJS v4编写了一个自定义插件，通过内联实例化的方式使用：

new Chart(myCanvas, {
    plugins: [
        new MyPlugin(...)
    ],
    // 其他配置项
});

插件功能正常，但存在绘制层级问题：自定义插件会在画布上绘制内容，同时启用了内置的Tooltip插件，当前执行顺序为：

1. 绘制图表区域
2. Tooltip插件绘制提示框
3. 自定义插件绘制内容
   导致自定义插件的内容覆盖在提示框上方。需要调整执行顺序，且插件必须保持内联实例化（构造函数需动态参数，无法全局注册），之前尝试手动在plugins数组中添加Tooltip类的方式无效。

解决办法：利用插件order属性控制执行优先级 #

ChartJS插件系统支持通过order属性定义执行顺序，数值越小，插件执行时机越早。内置Tooltip插件的默认order值为1000，只需给自定义插件设置一个小于1000的order，就能让它在Tooltip之前执行，避免覆盖提示框。

两种实现方式 #

方式一：在插件类中定义静态order属性

适合固定顺序的场景，直接在插件类中声明优先级：

class MyPlugin {
    // 定义静态order，数值小于1000即可
    static get order() {
        return 500;
    }

    // 插件核心逻辑（如draw方法等）
    // ...
}

方式二：实例化时动态设置order

适合需要根据传入参数调整顺序的场景，通过Object.assign给实例追加属性：

new Chart(myCanvas, {
    plugins: [
        // 实例化插件后手动指定order
        Object.assign(new MyPlugin(...), { order: 500 })
    ],
    // 其他配置项
});

注意事项 #

无需手动将Tooltip添加到plugins数组中，它是ChartJS默认全局注册的插件，只要没在配置中通过plugins: { tooltip: false }禁用，就会自动生效。之前手动添加Tooltip类导致失效，是因为内置插件需要特定的初始化逻辑，直接放入数组会破坏原有机制。

效果验证 #

设置完成后，执行顺序会变为：

1. 绘制图表区域
2. 自定义插件（order:500）绘制内容
3. Tooltip插件（order:1000）绘制提示框
   提示框会正常覆盖在自定义插件内容上方，符合预期。

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