时间戳

首页 > 解决方案 > Chart.js 3.x 自定义定位器：不能在 TypeScript 中使用它们

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

问题描述

我正在使用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 提供了强大的类型，但是如果使库的核心功能无法使用，它们就没有用了……我错过了什么？

标签： typescriptchart.jschart.js3

解决方案

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

通过将位置转换为@Master_T 的解决方案，您就是在欺骗编译器。当您创建定位器时，该解决方案也不能解决问题。

注意：这需要您使用 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工具提示的属性。

推荐阅读