React中的可滚动高图

Question

我已经找到了一种让Highcharts可滚动的方法，但我在React中做起来有问题。有什么最好的方法可以将其迁移到React组件中？下面是我想迁移到React组件中的代码。

(function(H) {

  //internal functions
  function stopEvent(e) {
    if (e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      if (e.stopPropagation) {
        e.stopPropagation();
      }
      e.cancelBubble = true;
    }
  }

  //the wrap
  H.wrap(H.Chart.prototype, 'render', function(proceed) {
    var chart = this,
      mapNavigation = chart.options.mapNavigation;

    proceed.call(chart);

    // Add the mousewheel event
    H.addEvent(chart.container, document.onmousewheel === undefined ? 'DOMMouseScroll' : 'mousewheel', function(event) {

      var delta, extr, step, newMin, newMax, axis = chart.xAxis[0];

      e = chart.pointer.normalize(event);
      // Firefox uses e.detail, WebKit and IE uses wheelDelta
      delta = e.detail || (e.wheelDelta / 120);
      delta = delta < 0 ? 1 : -1;

      if (chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop)) {
        extr = axis.getExtremes();
        step = (extr.max - extr.min) / 5 * delta;
        axis.setExtremes(extr.min + step, extr.max + step, true, false);
      }

      stopEvent(event); // Issue #5011, returning false from non-jQuery event does not prevent default
      return false;
    });
  });
}(Highcharts));

<div id="container" style="height: 400px; min-width: 320px; max-width: 600px; margin: 0 auto"></div>

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

这里你可以找到完整的示例。http:/jsfiddle.netwk8aeoLd。

Answer 1

我鼓励使用 可滚动绘图区域 这是一个完全支持的功能，比使用这个自定义代码。

API。https:/api.Highcharts.comhighchartschart.scrollablePlotArea。

使用React进行演示。https:/codesandbox.ioshighcharts-react-demo-dfwsm。