React TypeScript Highcharts 如何在图表加载时打开指定点位tooltip

核心报错原因是两类：TypeScript 无法自动推导 Highcharts 事件回调中的this指向，或者使用箭头函数导致this指向了 React 组件实例而非 Highcharts 实例。以下是完整可运行的实现方案：

1. 类型声明与回调写法调整 #

不要使用箭头函数作为load事件的回调，主动给回调的this标注Highcharts.Chart类型即可解决类型报错：

// 首先引入Highcharts相关类型
import Highcharts, { type Chart } from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import { useMemo } from 'react';

const LineChart = () => {
  const chartOptions = useMemo((): Highcharts.Options => {
    return {
      chart: {
        events: {
          // 关键：给this明确标注Chart类型，使用普通函数而非箭头函数
          load: function(this: Chart) {
            // 此处this已被TS正确识别为Highcharts实例，无类型报错
            // 替换为你要触发tooltip的指定点位，示例取第一个序列的第三个数据点
            const targetPoint = this.series[0]?.points?.[2];
            if (targetPoint) {
              // 触发tooltip展示
              this.tooltip.refresh(targetPoint);
            }
          }
        }
      },
      tooltip: {
        // 按需配置tooltip样式，确保允许自动显示
        enabled: true
      },
      series: [
        {
          type: 'line',
          data: [12, 24, 18, 32, 28]
        }
      ]
      // 其余图表配置省略
    }
  }, []);

  return (
    <HighchartsReact 
      highcharts={Highcharts} 
      options={chartOptions}
      // 避免不必要的重绘导致tooltip消失
      immutable={false}
    />
  )
}

2. 常见问题排查 #

• 若仍存在this类型报错：检查是否安装了冗余的@types/highcharts包，最新版Highcharts已内置完整类型定义，卸载第三方类型包即可修复。
• 若tooltip显示后立刻消失：检查是否有上层组件重绘触发了图表重新初始化，将chartOptions用useMemo包裹、给HighchartsReact组件加immutable={false}即可解决。
• 若需要在load回调中使用React组件内的状态：直接通过闭包引入即可，不需要修改this指向。

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