Хотите переместить полосу прокрутки по оси Y с колесом мыши в highcharts/highstock

Question

Ссылаясь на вопрос, я хочу переместить мою полосу прокрутки по оси 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, 
      } 

     ], 




    }); 

Данные в серии в формате массива

Любая помощь будет высоко оценен

Answer 1

Нет такой функции i n Highcharts или в Highstock. Вы можете добавить событие колеса мыши и связать его с функцией setExtremes для yAxis.

http://jsfiddle.net/3q79ey8h/1/

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