highcharts破壞選定的組註釋與按鈕

Question

嗨，我不知道如何定位或調用註釋js文件中的銷燬功能。但我可以在那裏看到它。

我已經嘗試了幾件事情，基本上我有一個簡化的柱形圖（下面的js小提琴鏈接）。我已經包含了註釋插件，您需要繪製一個矩形（線條效果不佳）。如果它沒有被選中（點擊選擇它）< < <這是我的摧毀（它必須被選中）和onclick（）按鈕的限定符...我提供了按鈕和一些嘗試將目標（這個）組和通話銷燬。這是筋疲力盡的嘗試122號，所以我刮掉了一切，我只是顯示我想做的事情。

下面是一個例子組（formmatted）：註釋，我努力的目標，並從我的圖表破壞。

<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/

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/