如何在 highcharts.js 上使用 typescript 类型

问题描述

我已经阅读了 the docs regarding typescript on Highcharts，但我仍然不太清楚如何在 highcharts.js 函数中使用类型。

例如，我的 formatter 选项上有一个 tooltip 函数，它接受一个参数 this。我该如何输入？

现在我正在使用 any 但这只是为了绕过打字稿错误。如果 Highcharts 在未来版本中更新其内容，我不想手动输入它，所以我认为有正确的方法吗？

const options = {
    tooltip: {
      outside: true,formatter: function (this: any): string {  // <---- need to replace `any` here
      }
    }
}

我应该在那里使用什么类型？我如何确切地找出我应该使用其中的哪一个？

我已尝试使用 Highcharts.TooltipformatterCallbackFunction，因为 the callback docs 中似乎表明了这一点。

formatter: function (this: Highcharts.TooltipformatterCallbackFunction): string {

但它似乎无法识别 y 对象内的属性 this。 this.y。也许这就是返回类型？我在哪里可以找到 this 的那个？

与 plotOptions.column.point.events.mouSEOver 相同的问题：

plotOptions: {
    column: {
        point: {
            events: {
                mouSEOver: function (this: any) { //<-- here
                    this.graphic.attr({
                       fill: this.y < 0 ? "red" : "blue",});
                }
            }
        }
    }
}

解决方法

您可以在 Highcharts API 中检查正确的类型。

对于工具提示格式化函数中的 this 使用：Highcharts.TooltipFormatterContextObject

对于 this 在鼠标悬停回调函数中使用：Highcharts.Point

API 参考：

https://api.highcharts.com/class-reference/Highcharts#.TooltipFormatterCallbackFunction

https://api.highcharts.com/class-reference/Highcharts#.PointMouseOverCallbackFunction

highcharts highcharts react-highcharts