用按钮破坏选定的组注释

Question

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

我已经尝试了一些事情，基本上，我有一个简化的列图(js，小提琴链接，下面)。我已经包含了注释插件，您需要绘制一个矩形(线条不能很好地工作)。如果它未被选中(单击以选择它)，<<<是我的销毁限定符(必须选择)和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>

这是jsFiddle....and，谢谢您的帮助！

Answer 1

您需要迭代注释(保存在allItems中)，然后检查是否存在selectionMarker。如果是，那就叫破坏()行动。

$('#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/

Answer 2

此外，如果您想继续删除，您需要首先取消选择您要销毁的项目。

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

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

实例：https://jsfiddle.net/Ly4d8mnm/4/