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

对于转义并发症错误，我刚刚使用 'as' 运算符解决了。

tooltip:{
 position: 'myCustomPositioner' as 'average',
}

Answer 2

执行此操作的正确方法是扩展定位器映射类型以包含您的自定义函数。参考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 属性。

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

Chart.js 3.x custom positioners: cannot use them in TypeScript

typescript

chart.js

chart.js3