highcharts - afterSetExtremes callback for highcharts

Question

I'm creating a highchart using the lazy_highcharts gem. I'd like to make use of the afterSetExtremes callback to regenerate some other data on the page on zooming. I've tried several ways, currently trying:

 @chart = LazyHighCharts::HighChart.new('graph') do |f|
                    f.chart(:zoomType =>'x', :defaultSeriesType => 'spline')
                    f.x_axis(:type=> 'datetime', :events => {:afterSetExtremes => "functon(event){alert('something')}"} )
end

But that gives me the error

Uncaught TypeError: Object functon(event){alert('something')} has no method 'apply'

in the javascript console when I zoom the chart. I assume this has something to do with the generator not correctly setting up the callback function, setting it as a string instead of interpreting it as a function.

I've also tried to set it on my chart object via javascript after creation, but so far have had no luck with that. A few attempts below

chart_my_id4.xAxis.events = {setExtremes: function(event) {
      alert('set extremes');
    }};
chart_my_id4.xAxis[1].events = {setExtremes: function(event) {
      alert('set extremes');
    }};

No luck there either.

Any insight appreciated, thank you.

Answer 1

不太熟悉... ruby​​，但我查看了github上的源代码，他们在将函数设置为属性时执行以下操作：

:formatter => "function() { return this.x; }".js_code

值得尝试添加该 .js_code 并查看它是否有效，因此您最终会得到：

 @chart = LazyHighCharts::HighChart.new('graph') do |f|
   f.chart(:zoomType =>'x', :defaultSeriesType => 'spline')
   f.x_axis(:type=> 'datetime', :events => {
     :afterSetExtremes => "functon(event){alert('something')}".js_code
   })
end

Answer 2

我不熟悉那个宝石，但在标准的 Highcharts 3.0 中，您可以通过这种方式添加事件：

chart.yAxis[0].update({
    events: {
        afterSetExtremes: function(){
            alert('x');
        }
    }
});

Answer 3

你可以这样做：

 LazyHighCharts::HighChart.new('graph') do |f|
   ...
   f.xAxis(:events => { :afterSetExtremes => after_set_extremes_function})
 end

-

 def after_set_extremes_function
   %|function(e) {
     chart = Highcharts.charts[0];
     chart.showLoading('Loading data...');
     $.getJSON("/path_to_your_action?start="+Math.round(e.min)+"&end="+Math.round(e.max), function(data) {
          chart.series[0].setData(data);
          chart.hideLoading();
        }
      }
    );
   }|.js_code
 end