想要使用鼠标滚轮在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, } ], }); 

该系列中的数据采用数组格式

任何帮助将受到高度赞赏

Answer 1

Highcharts和Highstock都没有这样的function。 您可以添加鼠标滚轮事件并将其与setExtremes函数绑定。

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