本文介绍了想要在highcharts / highstock中移动鼠标滚轮的y轴滚动条的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
提到我想用鼠标滚轮移动我的y轴滚动条的问题
有没有办法做到这一点？
yAxis：
{
滚动条：{
启用：true，
showFull：false
$ b $，
}
更新后的代码
Bellow是我更新的代码
var chart1 = new Highcharts.Chart（{
图表： {
renderTo：'container1'，
type：'column'，
zoomType：'xy'，
panning：true，
panKey：'shift'，
// type：'column'，
// zoomType：'xy'，
// panning：true，
// pankey：'shift'，
resetZoomButton ：{
位置：{
// align：'right'，//默认
// verticalAlign：'top'，//默认
x：-10，
y：350，
// height：25
}，
relativeTo：'chart'
}
}，
滚动条：{
已启用：true
}，
导航器：{
// xAxis：{
// tickWidth：0，
// lineWidth：0，
// gridLineWidth：1，
// tickPixelInterval：200，
//标签：{
// align：'left'，
// style：{
// color：'＃888'
//}，
// x：3，
// y：-4
//}
//}，
// yAxis：{
// gridLineWidth：0，
// startOnTick：false，
// en dOnTick：false，
// minPadding：0.1，
// maxPadding：0.1，
//标签：{
//启用：false
//}，
// title：{
// text：null
//}，
// tickWidth：0
//}，
// series ：{
// // data：arry_kwh_2，
// type：'column'，
// color：'＃4572A7'，
// fillOpacity：0.05，
// dataGrouping：{
//平滑：true
//}，
// lineWidth：1，
// marker：{
//启用：true
//}
//}，
启用：true，
height：30，
}，
rangeSelector：{
buttonTheme：{// styles for按钮
fill：'none'，
stroke：'none'，
'stroke-width'：0，
r：8，
style：{
color：'＃039'，
fontWeight：'bold'
}，
states：{
悬停：{
}，
select： {
fill：'＃039'，
style：{
color：'white'
}
}
}
$，b $ b启用：true，
inputBoxWidth：160，
inputStyle：{
color：'＃039'，
fontWeight：'bold'
}，
labelStyle：{
color：'black'，
fontWeight：'bold
}，
按钮：[{
type：'minute'，
count：60 * 6，
text：'6h'
}，{
类型：'day'，
count：1，
text：'1d'
}，{
类型：'day'，
count： 7，
text：'7d'
}，
{
类型：'day'，
count：14，
text：'2w'
}，
{
类型：'day'，
count：21，
text：'3w'
}，
{
type：'month'，
count：1，
text：'1m'
}，
{
类型：'all'，
text：'All'
}]
}，
plotOptions：{
列：{
turboThreshold：50000
}
}，
title：{
文字：'能量vs日期&时间'，
风格：{
fontWeight：'bold'，
}
}，
xAxis：{
类型：'datetime'，
//分钟：0，
//最大值：100000
}，
yAxis：
{
滚动条：{
启用：true，
showFull：false
}，
alternateGridColor：'＃FDFFD5'，
标题：{
text：'Energy（kWh）'，
style：{
// color：'＃FF00FF'，
fontSize：'12px'，
// sfont：'bold 200px Verdana，sans-serif'，
}
}
}，
series：
[
{
名称：'能源千瓦时'，
颜色：'绿色'，
数据：arry_kwh，
}
]，
}）;
系列中的数据是数组格式
任何帮助将不胜感激
解决方案
Highcharts和Highstock中都没有这样的功能。您可以添加一个鼠标滚轮事件，并将其绑定到yAxis的 setExtremes 函数中。
<$ p $ e $ {
$（$）$ $ $ $ $ $ $ $ $ $ $ if（e.preventDefault）{
e.preventDefault（）;
}
if（e.stopPropagation）{
e.stopPropagation（）;
}
e.cancelBubble = true;
}
}
//换行
H.wrap（H.Chart.prototype，'render'，function（ （图表）;
//添加mousewheel事件
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使用e.detail，WebKit和IE使用wheelDelta
delta = e.detail || - （e.wheelDelta / 120）;
delta = delta< 0？ 1：-1; $（$）
$ b 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）; //问题＃5011，从非jQuery事件返回false不会阻止默认
返回false;
}）;
}）;
}（Highcharts））;
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
解决方案
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));
这篇关于想要在highcharts / highstock中移动鼠标滚轮的y轴滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！