在Highcharts中动态添加或重绘事件函数 [英] Append onload or redraw event functions dynamically in Highcharts

问题描述

 我需要在Highcharts中动态地添加onload或重绘事件函数， $（'＃container'）。highcharts（{
 chart：{
 events：{
 load：function（event）{
 function1（）; 
 function2 ）; 
 function3（）; 
}，
 redraw：function（event）{
 functionA（）; 
 functionB（）; 
 functionC（） ; 
} 
} 
}，
 xAxis：{
}，
系列：[{
数据：[29.9，71.5] 
}] 
}）; 
  

但是我需要在配置图表后配置（因为我无法访问配置图表一步，图表通过包装来到我的代码中），我需要做这样的事情：

  //包装模拟
 ^ 
 | 
 | 
 ///////////////////////////////////////// 
 / / $（'＃container'）。highcharts（{// 
 // chart：{// 
 // events：{// 
 // load：function（event）{/ / 
 // function1（）; // 
 //}，// 
 // redraw：function（event）{// 
 // functionA（）; // 
 //} //<我无法访问此代码
 //} // 
 //}，// 
 // xAxis：{ // 
 //}，// 
 //系列：[{// 
 //数据：[29.9，71.5] // 
 //}] // 
 //}）; // 
 ///////////////////////////////////////// 
 
 //我手中只有容器标识，我可以得到highchart对象：
 $（'＃container'）。highcharts（）; 
 
 //我需要做这样的事情：
 appendOnLoadEvent（function2）; 
 appendOnLoadEvent（function3）; 
 
 appendOnRedrawEvent（functionB）; 
 appendOnRedrawEvent（functionC）; 
  

这可能吗？

解决方法

最简单的方法是按照第一个示例中的描述创建事件，并在这些函数中执行数组中所有必需的事件处理程序。

<例如：

  var redrawCallbacks = []; 
 $ b $（...）。highcharts（{
图：{
 events：{
 redraw：function（event）{
 for（var i = 0; i< redrawCallbacks.length; ++ i）redrawCallbacks [i] .call（this，event）; 
} 
} 
}}）; 
  

查看完整示例： http://jsfiddle.net/5S6hF/2/

UPDATE />
假设您使用默认的jQuery适配器，您可以稍后使用以下方式定义事件：

  $（图表） .on（'redraw'，function（）{alert（'new event handler'）;}）; 
  

参见 http://jsfiddle.net/5S6hF/6/

I need to append onload or redraw event functions dynamically in Highcharts, I know make that in config step, like:

$('#container').highcharts({
   chart: {
       events: {
          load: function(event) {
              function1();
              function2();
              function3();
          },
          redraw: function(event) {
              functionA();
              functionB();
              functionC();
          }
       }        
    },
    xAxis: {
    },
    series: [{
        data: [29.9, 71.5]     
    }]
});

But I need do that after config the chart ('cause I don't have access to config chart step, the chart comes to my code by a wrapper) and I need to do something like this:

//The wrapper simulation
^
|
|
/////////////////////////////////////////
//$('#container').highcharts({         //
//    chart: {                         //
//       events: {                     //
//          load: function(event) {    //
//              function1();           //
//          },                         //
//          redraw: function(event) {  //
//              functionA();           //
//          }                          //< "I dont't have access to this code"
//       }                             //  
//    },                               //
//    xAxis: {                         //
//    },                               // 
//    series: [{                       //
//        data: [29.9, 71.5]           //   
//    }]                               // 
//});                                  //
/////////////////////////////////////////

//I only have the container id in my hands, I can get the highchart object:
$('#container').highcharts();

//And I need to do something like this:
appendOnLoadEvent(function2);
appendOnLoadEvent(function3);

appendOnRedrawEvent(functionB);
appendOnRedrawEvent(functionC);

Is this possible?

解决方案

The easiest way is to create the events as you described in the first example, and in those functions execute all necesary event handlers from an array.

Something like:

  var redrawCallbacks = [];

  $(...).highcharts({
  chart: {
      events: {
          redraw: function(event) {
              for (var i = 0; i < redrawCallbacks.length; ++i) redrawCallbacks[i].call(this, event);
          }
      }
  }});

See full example at: http://jsfiddle.net/5S6hF/2/

UPDATE
Assuming you are using the default jQuery adapter, you can define events later with:

$(chart).on('redraw', function(){ alert('new event handler'); });

See demo at http://jsfiddle.net/5S6hF/6/

这篇关于在Highcharts中动态添加或重绘事件函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！