highcharts 的 afterSetExtremes 回调答案

【问题标题】：afterSetExtremes callback for highchartshighcharts 的 afterSetExtremes 回调
【发布时间】：2013-03-21 17:25:38
【问题描述】：

我正在使用lazy_highcharts gem 创建一个highchart。我想利用 afterSetExtremes 回调在缩放页面上重新生成一些其他数据。我尝试了几种方法，目前正在尝试：

 @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

但这给了我错误

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

当我缩放图表时在 javascript 控制台中。我认为这与生成器未正确设置回调函数有关，将其设置为字符串而不是将其解释为函数。

我也尝试在创建后通过 javascript 在我的图表对象上设置它，但到目前为止还没有运气。下面的一些尝试

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

那里也没有运气。

感谢您的任何见解。

【问题讨论】：

标签： highcharts lazy-high-charts

【解决方案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

【讨论】：

我会试试的。在搞砸了一段时间后，我放弃了它，直接去 JS，让一切正常。但我会尝试回过头来验证这一点。如果工作就这么简单就好了。

【解决方案2】：

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

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

【讨论】：

嗯，看起来懒惰的 highcharts 目前基于 v2.3.3 版本，这对我不起作用（没有方法“更新”）。将看到有关获取最新版本的信息。可能不得不放弃 gem 并直接使用 JS，但是它使留在 Ruby 中的事情变得容易。
由于该 gem 的文档确实有限（事实上，不存在），您能否举例说明如何为工具提示或数据标签添加格式化程序？我可以肯定的是返回的是object(hash)，而不是function。

【解决方案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

【讨论】：