React+TypeScript中为Highcharts的tooltip设置格式化函数的方法

你遇到的问题核心是箭头函数无法通过this获取数据，但Highcharts已经把tooltip的上下文数据通过ctx参数传递给你了，完全不需要依赖this。

具体解决方案： #

利用ctx.point获取columnrange的时间范围数据（low为起始时间戳，high为结束时间戳），再用Highcharts内置的dateFormat方法将时间戳格式化为UTC可读时间：

tooltip: {
  formatter: (ctx) => {
    // 自定义UTC时间格式，可根据需求调整格式字符串
    const startTime = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S UTC', ctx.point.low);
    const endTime = Highcharts.dateFormat('%Y-%m-%d %H:%M:%S UTC', ctx.point.high);
    return `时间范围：${startTime} 至 ${endTime}`;
  }
}

关键说明： #

1. Columnrange类型的每个数据点自带low和high字段，对应y轴的起始、结束时间戳，这些数据都存储在ctx.point对象中
2. Highcharts.dateFormat支持自定义格式字符串，比如'%b %d, %Y %H:%M'可输出Jan 01, 2024 12:00这类格式，可按需调整
3. 普通函数报错大概率是代码环境（如TypeScript）存在类型声明冲突，但箭头函数配合ctx参数完全可以绕过该问题，实现格式化需求

内容的提问来源于stack exchange，提问作者Quribe