Chart.js 3.x 自定义定位器：无法在 TypeScript 中使用它们

Question

我正在使用ChartJS v3并尝试实现自定义工具提示定位器，如文档中所述：

https://www.chartjs.org/docs/master/configuration/tooltip.html#position-modes

然而，问题是我正在编码TypeScript，类型检查正在为此与我作斗争。第一个问题是我无法像示例中那样定义自定义定位器：

const tooltipPlugin = Chart.registry.getPlugin('tooltip');
tooltipPlugin.positioners.myCustomPositioner = ...

因为返回的类型getPlugin()不包含该positioners属性。

第二个问题是当您必须配置插件时。我不能做到这一点：

plugins: {
    tooltip: {
      position: 'myCustomPositioner',
      ...
    }
}

因为该position属性仅接受默认内置值（'average'和'nearest'），但不接受自定义字符串。

我该如何解决这个问题？我很高兴最新的 ChartJS 提供了强类型，但如果使库的核心功能无法使用，它们就没用了……我错过了什么？

Answer 1

执行此操作的正确方法是扩展定位器映射类型以包含您的自定义功能。参考https://www.chartjs.org/docs/3.4.1/developers/charts.html，其中包括如何扩展自定义图表的类型，与此类似。

通过仅转换位置，就像 @bangash 的解决方案一样，您正在欺骗编译器。该解决方案也无法解决创建定位器时的问题。

注意：这期望您使用 ChartJS 3.x

例如，chartjs.d.ts在项目中的某个位置创建一个名为的文件，从中读取tsconfig.json@types/chartjs.d.ts

import type { TooltipPositionerFunction } from 'chart.js';

declare module 'chart.js' {
  // Extend tooltip positioner map
  interface TooltipPositionerMap {
    cursor: TooltipPositionerFunction<ChartType>;
  }
}

然后，在注册组件的地方创建函数：

import { Tooltip } from 'chart.js'

// Create positioner to put tooltip at cursor position
Tooltip.positioners.cursor = function (chartElements, coordinates) {
  return coordinates;
};

现在您可以使用光标作为position工具提示的属性。