Question

在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
            }
        }]
    });
  });

});

Answer 1

setExtremes回调：

为轴设置最小值和最大值时触发，或者通过调用.setExtremes（）方法或选择一个区域图表。 this关键字引用轴对象本身。一参数，事件，传递给函数。这包含常见的基于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);
        }
    }
},

更新了小提琴here。

Answer 2

一种方法是修改highstock以使用e.min和e.max的值（如果它们在事件处理程序中更改）。这可以通过修改3行代码来完成。

在highstock.src.js第7447行（版本2.0.4）中。该方法称为setExtremes。

变化：

fireEvent(axis, 'setExtremes', eventArguments, function () { // the default event handler

        axis.userMin = newMin;
        axis.userMax = newMax;

要：

fireEvent(axis, 'setExtremes', eventArguments, function (event) { // the default event handler

        axis.userMin = event.min;
        axis.userMax = event.max;

现在，在xAxis.setExtremes事件中更改e.min或e.max将起作用。（不要调用setExtremes（））

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

2 个答案: