如何在Chart.js和react-chartjs-2自定义插件中传递参数

TypeScript报错是因为Chart.js的默认类型定义中没有你自定义插件horizontalArbitraryLine的配置项，需要扩展Chart.js的类型系统来识别自定义选项，具体解决方案如下：

步骤1：定义插件选项的类型接口 #

先声明插件的配置项类型，明确lineColor的类型约束：

interface HorizontalArbitraryLineOptions {
  lineColor: string;
}

步骤2：扩展Chart.js的类型定义 #

通过declare module扩展Chart.js的PluginOptionsByType接口，让TypeScript识别你的自定义插件配置：

import { ChartTypeRegistry } from 'chart.js';

declare module 'chart.js' {
  interface PluginOptionsByType<TType extends keyof ChartTypeRegistry> {
    horizontalArbitraryLine?: HorizontalArbitraryLineOptions;
  }
}

步骤3：给插件指定正确的泛型类型 #

修改插件的类型声明，将泛型参数指定为你的选项类型，确保插件的beforeDraw方法能正确识别options参数：

import { Plugin } from "chart.js";

interface HorizontalArbitraryLineOptions {
  lineColor: string;
}

declare module 'chart.js' {
  interface PluginOptionsByType<TType extends keyof ChartTypeRegistry> {
    horizontalArbitraryLine?: HorizontalArbitraryLineOptions;
  }
}

export const horizontalArbitraryLine: Plugin<any, HorizontalArbitraryLineOptions> = {
    id: "horizontalArbitraryLine",
    beforeDraw(chart, args, options) {
        const {
            ctx,
            chartArea: { top, right, bottom, left, width, height },
            scales: { x, y },
        } = chart;
        ctx.save();
        // 使用可选链避免options未定义的情况
        console.log(options?.lineColor);
        // 这里可以添加你的水平线绘制逻辑
        ctx.restore();
    },
};

验证配置 #

现在在图表配置中使用horizontalArbitraryLine选项时，TypeScript不会再报错：

options: {
    plugins: {
        legend: {
            position: "bottom",
        },
        horizontalArbitraryLine: {
            lineColor: "black",
        },
    },
},

补充说明 #

• 如果将类型扩展放在单独的.d.ts文件中（比如chartjs-custom-plugins.d.ts），需要确保tsconfig.json的include数组包含该文件，让TypeScript能加载类型定义。
• 泛型中的any可以替换为你实际使用的图表类型（比如'line'、'bar'），让类型检查更严格。

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