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

Ala*_*ier 4 javascript jquery highcharts highstock

在highstock范围选择器中,我添加了一个自定义范围选择器按钮(名为:my dates),并希望在调用此按钮时设置自定义极限.我知道如果你把简单的按钮放在图表外面并调用: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
            }
        }]
    });
  });

});
Run Code Online (Sandbox Code Playgroud)

Mar*_*ark 5

setExtremes回调:

通过调用.setExtremes()方法或通过选择图表中的区域为轴设置最小值和最大值时触发.this关键字引用轴对象本身.一个参数event传递给函数.这包含基于jQuery或MooTools的常见事件信息,具体取决于哪个库用作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);
        }
    }
}, 
Run Code Online (Sandbox Code Playgroud)

在这里更新了小提琴.