Highchart 注释点击事件不起作用

Question

我正在尝试在 Highchart 注释上添加一个点击事件，但它不起作用..

我尝试在注释对象上设置事件属性，如下所述：

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

事件 mouseup、click、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 a. s. l.',
        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>

编辑 ：

我通过获取 annotation.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，只需在指定的注释/标签对象定义的事件。以下是处理点击事件的示例代码：

(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)

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

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

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

[编辑]

自 v7.0 起不再需要 Wrap 方法。只需删除 wrap 方法并保留来自通用 Annotation 对象的事件定义。

现场示例：http : //jsfiddle.net/rgm3puL8/