Question

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

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

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

事件 mouseup，单击dblclick。回调中的这个是指注释对象。

我在这里找不到有关注释事件的任何信息：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>

编辑：

我通过获取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之后，只需分配在注释/标签对象中定义的事件即可。这是处理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/

Highchart注释单击事件不起作用

1 个答案: