Chart.js 3.9自定义PointElement注册问题及正确扩展方式问询

问题场景 #

在Chart.js 3.9版本中，自定义继承自PointElement的元素类：

export default class CustomPointElement extends PointElement {
    draw(ctx: CanvasRenderingContext2D, area?: ChartArea) {
      // 自定义绘制逻辑
    }
}

调用Chart.register(CustomPointElement)注册后，图表仍使用原生PointElement，而非自定义元素。

原因分析 #

排查发现Chart.register方法中存在以下逻辑：

const proto = Object.getPrototypeOf(item);
let parentScope;

if (isIChartComponent(proto)) {
  // 确保父类已注册，并记录其默认配置的作用域
  parentScope = this.register(proto);
}

由于isIChartComponent对自定义元素的父类（PointElement）返回true，导致父类被自动注册，覆盖了自定义元素的注册结果。

正确解决方案 #

方案1：通过指定static id覆盖原生元素（推荐） #

给自定义元素类添加static id属性，设置为与原生PointElement相同的'point'，让注册时直接覆盖原生元素定义：

import { PointElement, Chart } from 'chart.js';

export default class CustomPointElement extends PointElement {
  // 指定与原生元素一致的ID，实现覆盖
  static id = 'point';

  draw(ctx: CanvasRenderingContext2D, area?: ChartArea) {
    // 自定义绘制逻辑示例
    super.draw(ctx, area);
    // 额外的自定义操作，比如修改填充色
    ctx.fillStyle = '#ff0000';
    ctx.fill();
  }
}

// 注册自定义元素，此时会直接覆盖原生PointElement
Chart.register(CustomPointElement);

方案2：直接修改registry并解决TS类型错误 #

如果需要直接修改内部注册表，可通过类型断言解决TypeScript的类型报错：

import { Chart, PointElement } from 'chart.js';

// 注册自定义元素后，手动覆盖原生映射
Chart.register(CustomPointElement);
// 使用类型断言绕过TS类型检查
(Chart.registry.elements as any).items.point = CustomPointElement;

或者更规范的类型断言：

import { Chart, PointElement, TypedRegistry } from 'chart.js';

Chart.register(CustomPointElement);
(Chart.registry.elements as TypedRegistry<typeof PointElement>).items.point = CustomPointElement;

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