http://jsfiddle.net/leongaban/0zuxtdcg/
I could not find a "Drag zoom" type event in the HighChart docs that would tell me that the user has finished zooming into a specific range on the chart, then give me the new min and max values.
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {
$('#container').highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
});
The zoom effects the extremes of the axis. You can use the setExtremes
or afterSetExtremes
events of the axis to catch this.
For example ( JSFiddle ):
xAxis: {
events: {
setExtremes: function(e) {
alert("Min: "+e.min+"\n"
+"Max: "+e.max);
}
}
}
The e
object contains the min and max, while this
in the function is the Axis object (which also has min and max). The minor difference between the two events is described in the API as:
afterSetExtremes
... As opposed to thesetExtremes
event, this event fires after the final min and max values are computed and corrected forminRange
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.