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

【问题标题】：How to use types with typescript on highcharts.js如何在 highcharts.js 上使用 typescript 类型
【发布时间】：2021-08-10 12:06:05
【问题描述】：

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

例如，我的tooltip 选项上有一个formatter 函数，它接受一个参数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 {

但它似乎无法识别this 对象内的属性y。 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 react-highcharts

【解决方案1】：

您可以在 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

【讨论】：