简介

大家好，我是react的新手，也是Highcharts的新手，但以前用过js。我有一个缩放功能，我想把它转换成react代码。我很难弄清楚如何在react的上下文中使用Highcharts.Chart.prototype.callbacks.push。

我想做的是

我正在尝试创建一个缩放功能，它可以在股票图表上平滑地使用鼠标滚轮。流行的平台交易视图有一个非常平滑的缩放，我正在尝试做一些类似的事情。

代码：

我有一个js fiddle https://jsfiddle.net/drewscatterday/84shran6/中的代码工作得很好，但是我很难转换它来做出React。
我已经尝试在我的react代码中这样做，但没有运气：

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>

我也尝试过像这样直接添加函数，但也没有运气：

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));

感谢任何花时间阅读这篇文章并帮助我的人：）