HighCharts使用鼠标滚轮进行缩放

siv3szwd  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(459)

简介

大家好,我是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));

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

6yt4nkrj

6yt4nkrj1#

要在React.js中扩展Higstock,请将您要 Package 的代码放在配置对象(选项)之前。

import React from 'react'
import { render } from 'react-dom'
import Highcharts from 'highcharts/highstock'
import HighchartsReact from 'highcharts-react-official'

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

        console.log(extremes); 
        console.log(newMin);

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

const options = {
  title: {
    text: 'My chart'
  },
  plotOptions: {
    series: {
        enableMouseTracking: true
    }
}

https://www.highcharts.com/docs/extending-highcharts/extending-highcharts
现场演示:https://stackblitz.com/edit/react-hmvz2z?file=index.js

相关问题