javascript - highcharts 使用按钮销毁选定的组注释

Question

嗨，我不知道如何定位或调用注释 js 文件中的销毁功能。但我可以在那里看到它。

我已经尝试了一些方法，基本上我有一个简化的柱形图(下面的js fiddle 链接)。我已经包含了注释插件，您需要绘制一个矩形(线条效果不太好)。如果未选择它(单击以选择它)<<< 这是我的 destroy 限定符(必须选择它)和 onclick() 按钮...我已经提供了按钮和一些针对(此)组的尝试，并且调用销毁。这是第 122 次精疲力尽的尝试，所以我把所有东西都刮掉了，我只是展示我想做的事情。

这是一个示例组(格式化):我试图从图表中定位并销毁的注释。

<g class="highcharts-annotations-group-0" zIndex="7" clip-path="url(#highcharts-2)">
    <g class="highcharts-annotation" transform="translate(74,35)">
        <path fill="rgba(255,0,0,0.4)" stroke="black" stroke-width="2" d="M 0 0 L 324 213"></path>
        <rect x="-5" y="-5" width="334" height="223" stroke="black" stroke-width="1" fill="transparent" stroke-dasharray="3,1" shape-rendering="crispEdges"></rect>
    </g>
    <g class="highcharts-annotation" transform="translate(76,34)">
        <path fill="rgba(255,0,0,0.4)" stroke="black" stroke-width="2" d="M 0 0 L 0 0"></path>
    </g>
    <g class="highcharts-annotation" transform="translate(81,38)">
        <path fill="rgba(255,0,0,0.4)" stroke="black" stroke-width="2" d="M 0 0 L 0 0"></path>
    </g>
</g>

Here is the jsFiddle....and thank you in advance for your help!

Answer 1

您需要迭代注释(保留在 allItems 中)，然后检查 selectionMarker 是否存在。如果是，则调用 destroy() 操作。

$('#button').click(function () {
    var chart = $('#container').highcharts(),
        each = Highcharts.each;

    each(chart.annotations.allItems, function(item, i) {
        if(item.selectionMarker) {
            item.destroy();
        }
    });
});

示例:

• https://jsfiddle.net/Ly4d8mnm/3/