javascript 带有自定义范围选择器按钮的 Highstock setExtremes
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21364527/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highstock setExtremes with a custom range selector button
提问by Alain Gauthier
In highstock range selector I added a custom range selector button (named: my dates) and would like to set a custom extremes when this button is called. I know it works if you put simple button outside the chart and call: chart.xAxis[0].setExtremes(30,80);.
在高库存范围选择器中，我添加了一个自定义范围选择器按钮（命名为：我的日期），并希望在调用此按钮时设置自定义极值。我知道如果你把简单的按钮放在图表外并调用：chart.xAxis[0].setExtremes(30,80);，它会起作用。
But my scenario is different I want to add a button beside "1m 1y All" range selector buttons, and want that new button to set a custom extremes dates. Using xAxis events setExtremes, does not seems to work unless I am missing something. http://jsfiddle.net/Aeaz3/1/
但我的情况不同我想在“1m 1y All”范围选择器按钮旁边添加一个按钮，并希望该新按钮设置自定义极端日期。除非我遗漏了什么，否则使用 xAxis 事件 setExtremes 似乎不起作用。http://jsfiddle.net/Aeaz3/1/
$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector: {
buttons: [{
type: '',
count: 2,
text: 'My dates'
},{
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'month',
count: 1,
text: '1m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'all',
text: 'All'
}],
},
title : {
text : 'AAPL Stock Price'
},
xAxis: {
events:{
setExtremes: function(e) {
var xMin = e.min;
var xMax = e.max;
var zmRange = computeTickInterval(xMin, xMax);
this.chart.xAxis[0].options.tickInterval =zmRange;
this.chart.xAxis[0].isDirty = true;
},
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
回答by Mark
The setExtremescallback:
该setExtremes回调：
Fires when the minimum and maximum is set for the axis, either by calling the .setExtremes() method or by selecting an area in the chart. The this keyword refers to the axis object itself. One parameter, event, is passed to the function. This contains common event information based on jQuery or MooTools depending on which library is used as the base for Highcharts.
通过调用 .setExtremes() 方法或在图表中选择一个区域，在为轴设置最小值和最大值时触发。this 关键字指的是轴对象本身。一个参数，事件，被传递给函数。这包含基于 jQuery 或 MooTools 的常见事件信息，具体取决于使用哪个库作为 Highcharts 的基础。
So it's not really meant to be used to set extremes but is rather a notification when something else does some extreme setting.
所以它并不是真的要用来设置极端，而是当其他东西做了一些极端设置时的通知。
That said, I still think it is possible to leverage it for your use case by catching the call when your button is clicked and then resetting it to your custom range:
也就是说，我仍然认为可以通过在单击按钮时捕获调用然后将其重置为自定义范围来将其用于您的用例：
xAxis: {
events:{
if (e.trigger == "rangeSelectorButton" &&
e.rangeSelectorButton.text == "My dates"){
// it is your button that caused this,
// so setExtrememes to your custom
// have to do in timeout to let
// highcharts finish processing events...
setTimeout(function(){
Highcharts.charts[0].xAxis[0].setExtremes(1198681756385,1368144000000)
}, 1);
}
}
},
Updated Fiddle here.
在这里更新了小提琴。
回答by Mike Nagle
One approach would be to modify highstock to use the values of e.min and e.max if they are changed in your event handler. This can be done by modifying 3 lines of code.
一种方法是修改 highstock 以使用 e.min 和 e.max 的值，如果它们在您的事件处理程序中发生更改。这可以通过修改 3 行代码来完成。
in highstock.src.js line 7447 (in version 2.0.4). The method is called setExtremes.
在 highstock.src.js 第 7447 行（在 2.0.4 版中）。该方法称为 setExtremes。
Change:
改变：
fireEvent(axis, 'setExtremes', eventArguments, function () { // the default event handler
axis.userMin = newMin;
axis.userMax = newMax;
To:
到：
fireEvent(axis, 'setExtremes', eventArguments, function (event) { // the default event handler
axis.userMin = event.min;
axis.userMax = event.max;
And now changing e.min or e.max in the xAxis.setExtremes event will work. (Don't call setExtremes())
现在在 xAxis.setExtremes 事件中更改 e.min 或 e.max 将起作用。（不要调用 setExtremes()）
