[英]Highchart annotation click event doesn't work
我正在嘗試在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');});
}
它不支持,但是實現起來非常簡單快捷。 您需要對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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.