Highcharts系列、Y轴等元素重复绑定事件优化咨询

这个重复绑定事件的问题我之前做Highcharts项目时也碰到过，一堆重复代码看着就头疼，给你几个实用的优化方案，能轻松搞定冗余问题：

最直接省心的方式，就是把重复的事件处理逻辑抽成一个独立的配置对象，然后在需要的地方直接引用它就行。

先定义好通用的事件配置：

// 把重复的事件处理统一放到这个对象里
const commonChartEvents = {
  click: (event) => foo(event),
  dblclick: (event) => foo(event),
  contextmenu: (event) => foo(event)
};

然后在你的Highcharts配置里直接复用这个对象，不用再重复写每个事件函数：

yAxis: [
  {
    labels: {
      format: "{value}°C",
      events: commonChartEvents // 直接引用通用配置
    },
    title: {
      text: "Temperature",
      events: commonChartEvents // 同样复用
    },
    id: "temperature"
  }
],
// 其他需要绑定的元素比如series也可以直接用
series: [
  {
    name: "Temperature Data",
    data: [10, 20, 15, 25],
    events: commonChartEvents
  }
]

如果之后你需要给某些元素的事件加一点动态逻辑，或者个别地方要换处理函数，可以封装一个生成事件配置的函数，灵活性更高：

// 封装函数，默认用foo作为处理函数，也可以传入自定义函数
function generateCommonEvents(handler = foo) {
  return {
    click: (event) => handler(event),
    dblclick: (event) => handler(event),
    contextmenu: (event) => handler(event)
  };
}

使用的时候直接调用这个函数就行，默认用foo，需要特殊处理的地方传个新函数：

title: {
  text: "Temperature",
  events: generateCommonEvents() // 默认使用foo
},
// 比如某个labels需要用另一个处理函数bar
labels: {
  format: "{value}°C",
  events: generateCommonEvents(bar)
}

如果你的这些事件是所有图表里的同类元素都需要绑定的，还可以通过Highcharts.setOptions设置全局默认配置，这样后续创建的所有图表都会自动应用这些事件，不用每个图表都写一遍：

// 设置全局默认事件配置
Highcharts.setOptions({
  yAxis: {
    title: {
      events: commonChartEvents
    },
    labels: {
      events: commonChartEvents
    }
  },
  series: {
    events: commonChartEvents
  }
});

不过要注意，这个是全局设置，会影响所有后续创建的Highcharts图表，如果只是单个图表需要复用，还是前两种方法更合适。

这些方案都能有效减少重复代码，你可以根据自己的实际场景选——单个图表内复用选方案1，需要动态调整选方案2，全项目通用就用方案3。

内容的提问来源于stack exchange，提问作者DixiPoowa