Javascript 要在highcharts/highstock中使用鼠标滚轮移动y轴滚动条吗

关于这个问题，我想用鼠标滚轮移动y轴滚动条 有什么办法吗

  yAxis:
        {
            scrollbar: {
                enabled: true,
                showFull: false

            },
        }

更新代码

下面是我的更新代码

var chart1 = new Highcharts.Chart({

        chart: {
            renderTo: 'container1',
            type: 'column',
            zoomType: 'xy',
            panning: true,
            panKey: 'shift',
            //type: 'column',
            //zoomType: 'xy',
            //panning: true,
            //pankey: 'shift',
            resetZoomButton: {
                position: {
                    //align: 'right', // by default
                    //verticalAlign: 'top', // by default
                    x: -10,
                    y: 350,
                    //height: 25
                },

                relativeTo: 'chart'
            }
        },
        scrollbar:{
            enabled: true
        },
        navigator: {

            //xAxis: {
            //    tickWidth: 0,
            //    lineWidth: 0,
            //    gridLineWidth: 1,
            //    tickPixelInterval: 200,
            //    labels: {
            //        align: 'left',
            //        style: {
            //            color: '#888'
            //        },
            //        x: 3,
            //        y: -4
            //    }
            //},
            //yAxis: {
            //    gridLineWidth: 0,
            //    startOnTick: false,
            //    endOnTick: false,
            //    minPadding: 0.1,
            //    maxPadding: 0.1,
            //    labels: {
            //        enabled: false
            //    },
            //    title: {
            //        text: null
            //    },
            //    tickWidth: 0
            //},
            //series: {
            //    //data: arry_kwh_2,
            //    type: 'column',
            //    color: '#4572A7',
            //    fillOpacity: 0.05,
            //    dataGrouping: {
            //        smoothed: true
            //    },
            //    lineWidth: 1,
            //    marker: {
            //        enabled: true
            //    }
            //},
            enabled: true,

            height: 30,

        },

        rangeSelector: {


            buttonTheme: { // styles for the buttons
                fill: 'none',
                stroke: 'none',
                'stroke-width': 0,
                r: 8,
                style: {
                    color: '#039',
                    fontWeight: 'bold'
                },
                states: {
                    hover: {
                    },
                    select: {
                        fill: '#039',
                        style: {
                            color: 'white'
                        }
                    }

                }
            },
            enabled: true,
            inputBoxWidth: 160,
            inputStyle: {
                color: '#039',
                fontWeight: 'bold'
            },
            labelStyle: {
                color: 'black',
                fontWeight: 'bold'
            },
            buttons: [{
                type: 'minute',
                count: 60 * 6,
                text: '6h'
            }, {
                type: 'day',
                count: 1,
                text: '1d'
            }, {
                type: 'day',
                count: 7,
                text: '7d'
            },
            {
                type: 'day',
                count: 14,
                text: '2w'
            },
            {
                type: 'day',
                count: 21,
                text: '3w'

            },
            {
                type: 'month',
                count: 1,
                text: '1m'
            },
            {
                type: 'all',
                text: 'All'
            }]

        },
        plotOptions: {
            column: {
                turboThreshold: 50000
            }

        },
        title: {
            text: 'Energy vs Date & Time',
            style: {

                fontWeight: 'bold',

            }
        },
        xAxis: {

            type: 'datetime',
            //min: 0,
            //max: 100000

        },

        yAxis:
        {
            scrollbar: {
                enabled: true,
                showFull: false

            },
            alternateGridColor: '#FDFFD5',
            title: {
                text: 'Energy (kWh)',
                style: {
                    //color: '#FF00FF',
                    fontSize: '12px',
                    //sfont: 'bold 200px Verdana, sans-serif',
                }
            }


        },

        series:
        [
            {
                name: 'Energy kWh',
                color: 'green',
             data: arry_kwh,
            }

        ],




    });

序列中的数据为数组格式

---

任何帮助都将不胜感激

在Highcharts和Highstock中都没有这样的功能。您可以添加鼠标滚轮事件，并使用yAxis的

setextrems

函数将其绑定

（功能（H）{
//内部功能
函数stopEvent（e）{
如果（e）{
如果（如默认）{
e、 预防默认值（）；
}
如果（如停止播放）{
e、 停止传播（）；
}
e、 取消气泡=真；
}
}
//包裹
H.wrap（H.Chart.prototype，“渲染”，函数（继续）{
var图表=此，
mapNavigation=chart.options.mapNavigation；
继续。呼叫（图表）；
//添加鼠标滚轮事件
H.addEvent（chart.container，document.onmousewheel===未定义的？'DOMMouseScroll'：'mousewheel'，函数（事件）{
var delta，extr，step，newMin，newMax，axis=chart.yAxis[0]；
e=图表.指针.规范化（事件）；
//Firefox使用e.detail，WebKit和IE使用wheelDelta
δ=e.详图| |-（e.车轮δ/120）；
δ=δ<0？1:-1；
if（chart.isInsidePlot（e.chartX-chart.plotLeft，e.chartY-chart.plotTop））{
extr=axis.getExtremes（）；
阶跃=（拉伸最大值-拉伸最小值）/5*增量；
轴设置极限（extr.min+步长、extr.max+步长、真、假）；
}
stopEvent（event）；//问题#5011，从非jQuery事件返回false不会阻止默认值
返回false；
});
});
}（高图）；

您可以分享更多的代码或JSFIDLE链接吗？这将允许有人给你一个更完整的答案。非常感谢。

(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.yAxis[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));