Highcharts:如何删除选定的注释(它是动态创建的)

Question

我有这个代码https://jsfiddle.net/delux123/62Lmskbx/11/用户可以在其中绘制圆、线段和箭头线段。当选择每个注释时；删除"；按钮可用，通常会删除选定的注释。

但这行不通！我尝试了以下方法来删除它们：

1(使用thischart.currentAnnotation.destroy()将删除注释(适用于所有三种类型(，但随后所有进一步的操作都将停止工作

document
.querySelectorAll('.highcharts-popup-annotations .deletebutton')[0]
.addEventListener(
'click',
function() {
thischart.currentAnnotation.destroy(); //this stops further drawing
thischart.annotationsPopupContainer.style.display = 'none';
}
);

2(使用IDthischart.removeAnnotation(thischart.currentAnnotation.options.id)删除是不起作用的，因为注释是动态创建的，并且它们没有分配ID。

document
.querySelectorAll('.highcharts-popup-annotations .deletebutton')[0]
.addEventListener(
'click',

thischart.removeAnnotation(thischart.currentAnnotation.options.id); //this requires elements to have IDs (which they do not have)
thischart.annotationsPopupContainer.style.display = 'none';
}
);

对于第二种方法，我甚至尝试与图形相交，并指定一个随机字符串作为ID(因为按ID删除不起作用的原因是ID未定义(。因此，在navigation -> bindings下，我添加了对象：

circleAnnotation: {
start: function(e) {
var navigation = this.chart.options.navigation;             
return this.chart.addAnnotation(
Highcharts.merge({
id: randomStr() //this is a method that generates random string
},
navigation
.annotationsOptions,
navigation
.bindings
.circleAnnotation
.annotationsOptions
)
);
}
}

这两种方法都不起作用。

Answer 1

您可以将一个直接注释对象传递给removeAnnotation方法：

thischart.removeAnnotation(thischart.currentAnnotation);

---

现场演示：https://jsfiddle.net/BlackLabel/5ycf3s4o/

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