Highchart注释单击事件不起作用

Question

我正在尝试在Highchart批注上添加click事件，但是它不起作用..

我试图在注释对象上设置events属性，如下所示：

https://www.highcharts.com/products/plugin-registry/single/17/Annotations

事件mouseup，单击dblclick。 回调中的this指向注释对象。

而且我在这里找不到有关注释事件的任何信息： https : //api.highcharts.com/highcharts/annotations

我做错了什么？

 // Data generated from http://www.bikeforums.net/professional-cycling-fans/1113087-2017-tour-de-france-gpx-tcx-files.html var elevationData = [ [0.0, 225], [0.1, 226], [0.2, 228], [0.3, 228], [0.4, 229], [0.5, 229], [0.6, 230], [0.7, 234], [0.8, 235], [0.9, 236], [1.0, 235], ]; // Now create the chart Highcharts.chart('container', { chart: { type: 'area', zoomType: 'x', panning: true, panKey: 'shift', scrollablePlotArea: { minWidth: 600 } }, title: { text: '2017 Tour de France Stage 8: Dole - Station des Rousses' }, subtitle: { text: 'An annotated chart in Highcharts' }, annotations: [{ labelOptions: { backgroundColor: 'rgba(255,255,255,0.5)', verticalAlign: 'top', y: 15 }, labels: [{ point: { xAxis: 0, yAxis: 0, x: 0.9, y: 235, }, text: 'Arbois', }], events:{ click: function(e){alert('test');} } }], xAxis: { labels: { format: '{value} km' }, minRange: 5, title: { text: 'Distance' } }, yAxis: { startOnTick: true, endOnTick: false, maxPadding: 0.35, title: { text: null }, labels: { format: '{value} m' } }, tooltip: { headerFormat: 'Distance: {point.x:.1f} km<br>', pointFormat: '{point.y} m asl', shared: true }, legend: { enabled: false }, series: [{ data: elevationData, lineColor: Highcharts.getOptions().colors[1], color: Highcharts.getOptions().colors[2], fillOpacity: 0.5, name: 'Elevation', marker: { enabled: false }, threshold: null }] }); 

 #container { max-width: 800px; min-width: 380px; height: 400px; margin: 1em auto; } 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/annotations.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/export-data.js"></script> <div id="container" style="height: 400px; min-width: 380px"></div> 

编辑：

我通过获取notes.group元素并为其分配事件处理程序解决了我的问题。

 for(var annotation in chart.annotations){
   var element = chart.annotations[annotation].group.element;
   element.addEventListener("click",function(e){alert('here I am');});
 }

Answer 1

它不支持，但是实现起来非常简单快捷。 您需要对initLabel函数proceed 包装 ，并在调用initLabel之后，只需分配在Annotation / label对象中定义的事件。 这是处理click事件的示例代码：

(function(H) {
  H.wrap(H.Annotation.prototype, 'initLabel', function(proceed, shapeOptions) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    var label = this.labels[this.labels.length - 1]
    var annotation = label.annotation
    if (label && annotation) {
      label.element.onclick = label.options.events.click || annotation.options.events.click
    }
  })
})(Highcharts)

它分配在标签对象中定义的事件，但如果未定义，则直接从所有标签的Annotation对象获取函数定义。

此外，您可以在此处阅读有关Highcharts.wrap（）函数的更多信息： https : //www.highcharts.com/docs/extending-highcharts/extending-highcharts

这是使用它的示例： http : //jsfiddle.net/ew7ufnjb/

[编辑]

从v7.0开始，不再需要使用包装方法。 只需删除wrap方法，并保留常规Annotation对象中的事件定义即可。

实时示例： http ： //jsfiddle.net/rgm3puL8/