Javascript highcharts覆盖addEvent函数

在第1126行中有一个函数addEvent

/**
         * Add an event listener
         * @param {Object} el A HTML element or custom object
         * @param {String} event The event type
         * @param {Function} fn The event handler
         */
        addEvent: function (el, event, fn) {
            $(el).bind(event, fn);
        },

我想调用我的自定义函数而不是默认函数，同时我不想更改highcharts.js

我想通过外部功能分配它，有什么方法可以实现吗

我的新代码将是

addEvent: function (el, event, fn) {
    if(typeof(fn)=="string"){
        try {
            eval(fn); 
        } catch (e) {
        if (e instanceof SyntaxError) {
            console.log(e.message);
        }
        }

    }
    $(el).bind(event, fn);
}

---

您可以逐个覆盖此函数

我想试试这个：

Highcharts.addEvent = (function(orig) {
  return function(el, event, fn) {
    if(typeof fn == "string") {
        try {
            eval(fn); 
        } catch (e) {
          if (e instanceof SyntaxError) {
            console.log(e.message);
          }
        }
    }

    orig(el, event, fn);
  };
})(Highcharts.addEvent);

使用Highcharts的

wrap

方法，这应该是

(function(H) {
  H.wrap(H, "addEvent", function(addEvent, el, event, fn) {
    if(typeof fn == "string") {
      try {
        eval(fn); 
      } catch (e) {
        if (e instanceof SyntaxError) {
          console.log(e.message);
        }
      }
    }

    addEvent(el, event, fn);
  });
})(Highcharts);

---

不幸的是，我不知道为什么包装addEvent不起作用（虽然应该！），但您可以覆盖或包装point的importEvents，以执行类似的操作（但仅限于points）：

---

演示：

不可能通过使用wrap实用程序在第1126行重现修改

addEvent

源代码的效果，因为我不完全理解其中的原因，wrap不适用于对

addEvent

进行的大量内部调用，包括由于初始配置中指定的事件而触发的调用，例如您在plotOptions/series/point/events下的调用

但是，按如下方式添加时，换行将应用于事件：

(function (H) {
    Highcharts.Chart.prototype.callbacks.push(function (chart) {
        H.addEvent(chart.container, 'click', function() { alert('click!') });
    });
}(Highcharts));

或者与您的情况一样，将函数作为字符串添加到点事件：

(function (H) {
    Highcharts.Chart.prototype.callbacks.push(function (chart) {    
        H.addEvent(chart.series[0].data, 'click', "(function() { alert (this.y);})");
    });
}(Highcharts));

因此，wrap函数可以像这样处理这两个问题：

(function (H) {
    H.wrap(H, "addEvent", function (addEvent, el, event, fn) {
        if (typeof fn == "string") {
            try {
                var evalfn = eval(fn);
                addEvent(el, event, evalfn);
            } catch (e) {
                if (e instanceof SyntaxError) {
                    console.log(e.message);
                }
            }
        } else {
            addEvent(el, event, fn);
        }
    });
})(Highcharts);

我承认这不完全是你所要求的，但可以为你试图实现的目标提供另一种解决方案

---

这里的所有演示：

使用

Highcharts.wrap（）修改
Highcharts.addEvent
，因为Highcharts到
addEvent
不起作用。更改外部<代码>Highcharts.addEvent

对内部参考没有影响

---

将代码向后追溯一点，您会发现

addEvent

。Highcharts可以通过使其与其他JavaScript框架协同工作，这将使用与特定框架协同工作的版本覆盖默认的

窗口

要在Highcharts保存内部引用之前修改默认适配器上的
addEvent
，我们可以加载主JS文件两次：（）


//Highcharts检测是否已加载多次
//并抛出一个错误以提醒开发人员
//我们通过取消设置Highcharts对象来解决这个问题
window.Highcharts=null；
window.HighchartsAdapter.addEvent=函数（el、事件、fn）{
//在此处添加自定义代码
$（el）.bind（事件，fn）；
};

这将导致对JS文件发出第二个HTTP请求，但它应该返回304响应，因为浏览器应该已经缓存了第一个请求中的文件


虽然这可能暂时可行，但从长远来看，对其他人的代码进行猴子补丁并不是最好的方法，例如，您或其他开发人员可能会在一年后决定升级到Highcharts的最新版本（使用完全不同的内部API），而没有意识到/记住此更改。我会考虑其他方法来做你想做的事情，然后再使用猴子修补程序。
 < P>注意HigCalts中的这些代码行。JS:

// check for a custom HighchartsAdapter defined prior to this file
var globalAdapter = win.HighchartsAdapter,
    adapter = globalAdapter || {};

// Initialize the adapter
if (globalAdapter) {
    globalAdapter.init.call(globalAdapter, pathAnim);
}


// Utility functions. If the HighchartsAdapter is not defined, adapter is an empty object
// and all the utility functions will be null. In that case they are populated by the
// default adapters below.

由于
addEvent
是在
窗口中指定的。HighchartsAdapter
，因此您需要创建一个自定义的
HighchartsAdapter
来覆盖它。上有一个自定义highcharts适配器的示例。
以与所有浏览器兼容的方式轻松使用DOM事件。以下是经验

创建您的函数，例如mouseup

var MeObjectDOM_mouseup = function(){
           Me blabla code....
}

现在创建您的活动

if(MeObjectDOM.addEventListener){
 MeObjectDOM.addEventListener("mouseup", MeObjectDOM_mouseup ,true);
}else if(MeObjectDOM.attachEvent){
MeObjectDOM.attachEvent("mouseup", MeObjectDOM_mouseup);
}else{
 MeObjectDOM['onmouseup'] = MeObjectDOM_mouseup;
};

您的活动现在与IE、NETSCAPE、CHROME、EDGE、OPERA、FIREFOX、SAFARI甚至SAFARI 5或IE 5、6和NETSCAPE 4（^__^）等旧版本兼容


Chrome Mozilla在谷歌恢复之前是网景公司。除了IE和SAFARI，FireFox和OPERA都来自MOZILLA。因此，从1980年到2019年，您的代码将与所有现有浏览器兼容。请参阅更多
昨天我尝试了几乎所有的可能性。。但是什么都不管用：（你最终解决了吗？还没有。）现在我在highcharts源代码中做了更改。据我所知，你需要指定自己的自定义HighchartsAdapter，因为它是
addEvent（）
定义的。
addEvent（）
不能使用
wrap（）进行包装
提供的函数。查看演示..它不起作用..在点击事件上，我发送一个函数字符串…如果我事先知道要单击哪个序列以及事件绑定到哪里，那么对我来说最好的解决方案是在图表对象中使用eval，如{series:{events:{click:eval（'（function（）{alert（this.y）}}}..我得到的是AJAX响应的JSON格式的series对象..在那里我必须递归地迭代对象，检查“events”标记，然后使用eval（）对于所有子元素..如果我使用上述解决方案，我的问题将与递归迭代JSON对象并对其应用单击事件相同..我想避免这些递归迭代我明白了！在这种情况下，我恐怕相信（但如果有人可以优雅地重写该函数，则需要更正）你必须像以前那样递归JSON或编辑HighCharts.js源代码。就我个人而言，我每次都会选择前者。与HighCharts所做的相比，这只是几行代码，是处理过程中的一小部分。@AnupSingh你能试一下这个解决方案吗？
var MeObjectDOM_mouseup = function(){
           Me blabla code....
}

if(MeObjectDOM.addEventListener){
 MeObjectDOM.addEventListener("mouseup", MeObjectDOM_mouseup ,true);
}else if(MeObjectDOM.attachEvent){
MeObjectDOM.attachEvent("mouseup", MeObjectDOM_mouseup);
}else{
 MeObjectDOM['onmouseup'] = MeObjectDOM_mouseup;
};