React中实现Highcharts鼠标滚轮平滑缩放的问题求助

我有JavaScript基础，但刚接触React和Highcharts，想把已实现的类似TradingView的股票图鼠标滚轮平滑缩放功能迁移到React中，试了两种方法都失败了，不清楚React环境下怎么正确使用Highcharts.Chart.prototype.callbacks.push，求可行方案。

已尝试的两种实现方式 #

第一种：绑定div的onScroll事件 #

const handleScroll= (e) =>{
    e.preventDefault();
    var chart = Highcharts.chart;
    var xAxis = chart.xAxis[0],
    extremes = xAxis.getExtremes(),
    newMin = extremes.min,
    output = [];

    if (e.deltaY < 0) {
        xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
    }
    else {
        xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
    }
}

<div className="Chartdisplay__chart" id="chart" onScroll={handleScroll}>
    <StockChart options={stockOptions} highcharts={Highcharts} />
</div>

问题：Highcharts.chart不是获取实例的正确方式，且React的onScroll监听的是容器滚动而非鼠标滚轮事件，逻辑不匹配。

第二种：全局注册回调 #

let ar = [];
(function(H) {
  Highcharts.Chart.prototype.callbacks.push(function(chart) {
    H.addEvent(chart.container, 'mousewheel', function(e) {
      var xAxis = chart.xAxis[0],
      extremes = xAxis.getExtremes();

      if (e.deltaY < 0) {
          xAxis.setExtremes(extremes.min - (extremes.min * 0.001), extremes.max, true);
      }
      else {
          xAxis.setExtremes(extremes.min + (extremes.min * 0.001), extremes.max, true);
      }
    });
  });
}(Highcharts)); 

问题：在React组件中全局注册会导致重复绑定（组件重渲染时多次推送回调），且未结合React生命周期管理事件绑定，可能出现实例未创建就执行绑定的情况。

正确实现方案 #

在React中，应通过highcharts-react-official提供的callback属性获取图表实例，结合React Hooks管理事件绑定，避免全局污染和内存泄漏。

完整代码示例 #

import React, { useRef, useEffect } from 'react';
import Highcharts from 'highcharts';
import HighchartsStock from 'highcharts/modules/stock';
import { StockChart } from 'highcharts-react-official';

// 加载Highcharts股票模块
HighchartsStock(Highcharts);

const StockChartWithWheelZoom = () => {
  const chartRef = useRef(null);
  // 你的图表配置（根据实际需求修改）
  const stockOptions = {
    title: { text: '股票走势' },
    xAxis: { type: 'datetime' },
    series: [{
      name: '示例股票',
      data: [/* 你的数据数组 */]
    }]
  };

  // 图表加载完成后，保存实例到ref
  const handleChartLoad = (chart) => {
    chartRef.current = chart;
  };

  // 鼠标滚轮缩放逻辑
  const handleMouseWheel = (e) => {
    e.preventDefault();
    if (!chartRef.current) return;

    const xAxis = chartRef.current.xAxis[0];
    const extremes = xAxis.getExtremes();
    const displayRange = extremes.max - extremes.min;
    // 缩放系数，可根据手感调整
    const scaleRatio = 0.05;

    if (e.deltaY < 0) {
      // 向下滚轮：放大视图（缩小显示范围）
      xAxis.setExtremes(
        extremes.min + displayRange * scaleRatio,
        extremes.max - displayRange * scaleRatio,
        true // 启用平滑动画
      );
    } else {
      // 向上滚轮：缩小视图（扩大显示范围）
      xAxis.setExtremes(
        extremes.min - displayRange * scaleRatio,
        extremes.max + displayRange * scaleRatio,
        true
      );
    }
  };

  // 绑定/解绑鼠标滚轮事件
  useEffect(() => {
    const container = chartRef.current?.container;
    if (container) {
      container.addEventListener('mousewheel', handleMouseWheel);
      // 组件卸载时移除事件监听，防止内存泄漏
      return () => container.removeEventListener('mousewheel', handleMouseWheel);
    }
  }, [chartRef.current]);

  return (
    <StockChart
      options={stockOptions}
      highcharts={Highcharts}
      callback={handleChartLoad}
    />
  );
};

export default StockChartWithWheelZoom;

核心要点 #

1. 用useRef存储图表实例：避免每次渲染重新获取，确保实例稳定
2. 通过callback获取实例：图表加载完成后触发，保证实例已创建
3. useEffect管理事件绑定：组件挂载时绑定，卸载时解绑，避免重复绑定和内存泄漏
4. 比例化缩放逻辑：基于当前显示范围计算缩放值，比固定数值更适配不同数据区间
5. 启用平滑动画：setExtremes第三个参数设为true，实现类似TradingView的平滑缩放效果

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