javascript - 带有自定义范围选择器按钮的 Highstock setExtremes

Question

在 highstock 范围选择器中，我添加了一个自定义范围选择器按钮(名为:我的日期)，并希望在调用此按钮时设置自定义极值。我知道如果您将简单的按钮放在图表外并调用:chart.xAxis[0].setExtremes(30,80);。

但我的情况有所不同，我想在“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
            }
        }]
    });
  });

});

Answer 1

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.

所以它并不是真的要用来设置极端，而是当其他东西做了一些极端设置时发出通知。

也就是说，我仍然认为可以通过在单击按钮时捕获调用然后将其重置为自定义范围来将其用于您的用例:

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);
        }
    }
}, 

更新 fiddle here .