我使用highcharts绘制了图表。我在x轴上有12个代码。但默认（onload）我只使用highcharts选项 min，max 显示前6个。我有下一个按钮，使用 setExtremes（6,11）显示图表的重置。我工作得很好。但是现在我在触摸滑动（移动和网络）上寻找相同的功能。我在插件上找不到任何附加事件来做那些事情。有没有人尝试过相同的！有人可以告诉一些可能的方法来做到这一点。这是jsfiddle来玩！
$(function () {
var xCategories = ["06:30AM", "08:30AM", "10:30AM", "12:30PM", "02:30PM", "04:30PM", "06:30PM", "08:30PM", "10:30PM", "12:30AM", "02:30AM", "04:30AM"];
var alerts_temp_graph = $('#alerts_temp_graph').highcharts({
credits: {
enabled: false
},
chart: {
//zoomType: 'x',
backgroundColor: 'transparent',
type: 'spline',
},
title: {
text: '',
x: 0 //center
},
xAxis: [{
gridLineWidth: 0.5,
startOnTick: false,
endOnTick: false,
minPadding: 0,
maxPadding: 0,
tickInterval: 1,
labels: {
//rotation:-90,
formatter: function () {
return xCategories[this.value];
}
},
min: 0,
max: 6,
plotBands: [{
"color": "",
"to": 0,
"from": 0.5
}, {
"color": "#fcf8e8",
"to": 0.5,
"from": 1
}, {
"color": "#fcf8e8",
"to": 1,
"from": 1.5
}, {
"color": "#fcf8e8",
"to": 1.5,
"from": 2
}, {
"color": "",
"to": 2,
"from": 2.5
}, {
"color": "",
"to": 2.5,
"from": 3
}, {
"color": "",
"to": 3,
"from": 3.5
}, {
"color": "",
"to": 3.5,
"from": 4
}, {
"color": "",
"to": 4,
"from": 4.5
}, {
"color": "",
"to": 4.5,
"from": 5
}, {
"color": "",
"to": 5,
"from": 5.5
}],
}],
yAxis: [{
title: {
text: ''
},
gridLineWidth: 0,
labels: {
enabled: false
}
}],
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false
}
}
},
tooltip: {
valueSuffix: '°C'
},
legend: false,
series: [{
lineWidth: 8,
color: '#24d3c4',
data: [60.93, 57.75, 56.58, 55.62, 54.79, 53.83, 60.93, 57.75, 56.58, 55.62, 54.79, 53.83],
}]
});
$(document).on('click', '#next', function () {
var alerts_temp_graph = $('#alerts_temp_graph').highcharts();
alerts_temp_graph.xAxis[0].setExtremes(6, 11);
});
});