Want to move y-axis scrollbar with mouse wheel in

问题:

Referring to the question i want to move my y-axis scrollbar with mouse wheel Is there any way to do it ?

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

            },
        }

Updated Code

Bellow is my updated code

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,
            }

        ],




    });

The data in the series is in array format

Any help would be highly appreciated

回答1:

There is no such feature in Highcharts nor in Highstock. You could add a mouse wheel event and bind it with a setExtremes function for 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));