共享事件图表

Question

我正在使用 HighCharts Custom Events Module（但即使不使用它，我的问题仍然相同）并且我将相同的 events/functions 绑定到我的每个元素（系列、yAxis 等） ...) 并且越来越重复：

...
yAxis: [
{
    labels: {
        format: "{value}°C"
    },
    title: {
        text: "Temperature",        
        events: {
            click: function (event) {
                foo(event);
            },
            dblclick: function (event) {
                foo(event);
            },
            contextmenu: function (event) {
                foo(event);
            }
        }
    },
    id: "temperature",
    labels: {
        events: {
            click: function (event) {
                bar(event);
            },
            dblclick: function (event) { 
                bar(event);
            },
            contextmenu: function (event) {
                bar(event);
            }
        }
    }
},
    {
    labels: {
        format: "{value}km"
    },
    title: {
        text: "Width",      
        events: {
            click: function (event) {
                foo(event);
            },
            dblclick: function (event) {
                foo(event);
            },
            contextmenu: function (event) {
                foo(event);
            }
        }
    },
    id: "temperature",
    labels: {
        events: {
            click: function (event) {
                bar(event);
            },
            dblclick: function (event) { 
                bar(event);
            },
            contextmenu: function (event) {
                bar(event);
            }
        }
    }
}
...
],

我什至允许用户添加更多（同样，yAxis、系列等..."after render"）。

这就是为什么我想知道是否有更多 "global way" 将事件绑定到给定图表的每个 yAxis、系列...。类似于

Highcharts.setOptions({ // Apply to all charts
    series: {    //hypothetically
        events: {
            click: function (event) {
                foo(event)
            }
        }
    }
});

我还考虑过在渲染系列后创建某种更新回调，比如

    Highcharts.setOptions({ // Apply to all charts
        events: {
            addSeries: function (event) {
                event.update(
                    {events{
                        click: function(event){ 
                            foo(event); 
                        }
                    }
                }, false);
            }
        }
    });

但这更像是一种黑客攻击

这个问题不是很重要，更多的是出于好奇，但同时，它会让我的（糟糕的）代码更清晰^^

感谢您的阅读。

Answer 1

可以在 plotOptions.series 属性中指定将应用于所有系列的选项。使用Highcharts.setOptions函数更改每个图表的默认选项：

var foo = function() {
  console.log("contextmenu event");
}

Highcharts.setOptions({
  xAxis: {
    labels: {
      events: {
        contextmenu: foo
      }
    }
  },   
  plotOptions: {
    series: {
      events: {
        contextmenu: foo
      },
      dataLabels: {
        enabled: true,
        events: {
          contextmenu: foo
        }
      }
    }
  }
});

var chart = Highcharts.chart('container', {

  chart: {
    type: 'column'
  },

  xAxis: [{
    labels: {
      style: {
        color: '#bada55'
      }
    }
  }, {}],

  series: [{
    data: [1, 2]
  }, {
    data: [3, -4],
    xAxis: 1
  }]
});

现场演示： http://jsfiddle.net/BlackLabel/Lxrg3hsy/

API参考：https://api.highcharts.com/class-reference/Highcharts#setOptions

共享事件图表

Shared events highcharts

javascript

events

highcharts

shared

custom-events