[英]HighCharts - Set Max and Min values in zoom reset
I have a little problem with Highcharts zooming option. 我对Highcharts缩放选项有一点问题。
I want the reset zoom to preserve a maximum and minimum that I set. 我希望重置缩放保留我设置的最大值和最小值。 The user can zoom in, but when he zooms out (with the reset zoom button), I want the chart to fit this maximum and minimum that I setted before.
用户可以放大,但是当他缩小(使用重置缩放按钮)时,我希望图表适合我之前设置的最大值和最小值。
Right now, highcharts grab the dataMin
and dataMax values
to reset zoom. 现在,高位图表将获取
dataMin
和dataMax values
以重置缩放。
I tried to override thesse values in setExtreme
event with no success. 我试图覆盖setExtreme事件中的这些值,
setExtreme
没有成功。
Here is a snippet showing this behaviour: 以下是显示此行为的代码段:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'x',
},
xAxis: { type:'datetime' },
series: [{
data: [
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
]
}]
});
var chart = $('#container').highcharts();
chart.xAxis[0].setExtremes(Date.UTC(1970, 5, 9), Date.UTC(1971, 10, 9));
});
http://jsfiddle.net/Ln7x4mba/1/ http://jsfiddle.net/Ln7x4mba/1/
SOLUTION 解
Based in @jlbriggs answer and since I was dynamically updating the same chart, The solution was: 基于@jlbriggs答案,由于我正在动态更新同一张图表,因此解决方案是:
chart.xAxis[0].update({min: myMinValue, max: myMacValue});
http://jsfiddle.net/Ln7x4mba/4/ http://jsfiddle.net/Ln7x4mba/4/
If you set the min and max as part of your x axis configuration options, rather than calling the setExtremes() function after building the chart, the reset zoom works as expected (and it's more efficient): 如果将最小值和最大值设置为x轴配置选项的一部分,而不是在构建图表后调用setExtremes()函数,则重置缩放将按预期工作(并且效率更高):
xAxis: {
type:'datetime',
min: Date.UTC(1970, 5, 9),
max: Date.UTC(1971, 10, 9)
}
Updated fiddle: 更新的小提琴:
Hide the button that appears inside the chart 隐藏图表内显示的按钮
chart: {
resetZoomButton: {
theme: {
display: 'none'
}
}
}
then use your own button: 然后使用您自己的按钮:
$('#button2').click(function(){
chart.xAxis[0].setExtremes(Date.UTC(1970, 5, 9), Date.UTC(1971, 10, 9));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.