从Highstock的RangeSelector获取当前选择的范围

时间:2013-08-23 10:21:41

标签: javascript charts highcharts highstock

我正在使用highcharts和highstock,并且有一些使用rangeSelector的图表。

一切正常,但我想获取当前选定的范围(当用户点击其中一个rangeSelector按钮时),以便我可以将其存储在cookie中以了解我想要的范围下次默认显示。

到目前为止,我已经尝试过各种各样的事情,例如添加chart.events.redraw测试来尝试捕获chart.rangeSelector.buttons对象,但它似乎并没有包含任何有趣的东西。

对我来说,理想情况是rangeselector.buttons上的事件回调,带有一个简单的getter函数,就像chart.rangeSelector.buttons[x].setState()的等价物,名为chart.rangeSelector.buttons[x].getState()

我很惊讶这不存在......我一定是错过了什么。有人可以提供帮助吗?

3 个答案:

答案 0 :(得分:5)

来自jsfiddle.net/E6GHC/1的jsfiddle似乎部分地回答了这个问题(尽管我仍然感到惊讶,因此没有事件回调)

xaxis上的setExtremes事件完成了这项工作:

 xAxis: {
        events: {
            setExtremes: function(e) {
                console.log(this);
                if(typeof(e.rangeSelectorButton)!== 'undefined')
                {
                  alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
                }
            }
        }
    }

答案 1 :(得分:3)

这个http://jsfiddle.net/E6GHC/5/应该做你想做的事情:

xAxis: {
  events: {
    setExtremes: function(e) {
      if(typeof(e.rangeSelectorButton)!== 'undefined') {
        var c = e.rangeSelectorButton.count;
        var t = e.rangeSelectorButton.type;
        var btn_index = null;
        if(c == 1 && t == "month"){
          btn_index = 0;
        } else if(c == 3 && t == "month"){
          btn_index = 1;
        } else if(c == 6 && t == "month"){
          btn_index = 2;
        } else if(t == "ytd"){
          btn_index = 3;
        } else if(c == 1 && t == "year"){
          btn_index = 4;
        } else if(t == "all"){
          btn_index = 5;
        }
        // Store btn_index in a cookie here and use it
        // to initialise rangeSelector -> selected next
        // time the chart is loaded
        alert(btn_index);
      }
    }
  }
}

答案 2 :(得分:3)

图表事件:重绘可以获得显示范围。代码在highstock 3.10

中进行测试
events: {
    redraw: function(event) {
        console.log('==============> chart redraw <==============');
        console.log(
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.currentTarget.xAxis[0].min),
            Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', event.currentTarget.xAxis[0].max)
        );
        // log the min and max of the y axis
        console.log(event.currentTarget.yAxis[0].min, event.currentTarget.yAxis[0].max);
    }
}