Highchartsでchart.rendererを使用して追加したテキストを削除する方法

Question

凡例（see fiddle here）ではなくグラフにラベルを追加しました。 chart.renderer.textを使用してグラフにグラフを貼り付けたら、ボタンをクリックして追加の系列を追加することができます。系列は他の系列を抑制します（正常に）。しかし、どうやってこれらのラベルを今から取り除くことができますか？

例：これはラインとラベルのフルセットです。

を、これはボタンを同時に抑制する追加の行を表示するためにクリックされたときである他の4つのライン：

は、私はこのようなラベルを追加：

chart.renderer.text('Volcanic', 1170, 360) 
    .css({ 
    fontSize: '13px', 
    color: '#7d7d7d' 
    }) 
.add(); 

は今、これらのラベルが残っている - しかし、離れて行く必要があります。私はこれを達成できる方法は何ですか？ IDを追加して、chart.renderer.byID（xy）.remove（）などを呼び出すことは可能でしょうか？

Answer 1

HCのドキュメントを見ると、リムーバブルであると思われる唯一のレンダリングされた要素はrendered.pathです。しかし、コードを見ることで、jqueryを使ってレンダリングされた要素を削除することができます。テキスト内のテキストまたはテキスト内のtspanで表示されるテキスト。

jquery、このように削除します。以下のコードは、私はあなたがハードjsfiddleまたは画面に表示するときに問題があるのx、レンダリングされたテキストのy座標をコード化されていることがわかり、自然はさらに

var natural = ['Volcanic','Solar','Ozone','Orbital Changes'] 
$(natural).each(function(i,d){ 
       chart.get(d).remove(); 
       $('tspan:contains("'+d+'")').closest('text').remove() 
       $('text:contains("'+d+'")').remove() 
      }) 

をクリックすると、すべての（テキストおよびシリーズ）を削除します大きすぎるか大きすぎます。 plotXとplotYを使って、行の終わりを特定し、そこにプロットすることができます。例：

var chart = $('#container').highcharts(); 
var point = chart.get('Land Use').points 'get all the plotted points 
    point[point.length-1].plotX ' length -1 is the last point, this is x, plotY will get you y. 

最後に、私はあなたが他のボタンがクリックされたときにこれらの（削除）シリーズを戻すことになるでしょうので、あなたが非表示関数の後だと思います。したがって、削除した場合は、シリーズを再レンダリングする必要があります。

Answer 2

レンダリングされたオブジェクトを削除するには、.destroy()を呼び出します。 変数にオブジェクトを割り当てるだけです。ここで

var objLabel; // assign the var so it is reachable in your scope 

objLabel = $('#container').highcharts().renderer.text('Volcanic', 100, 30) 
    .css({ 
    fontSize: '13px', 
    color: '#7d7d7d' 
    }) 
.add(); 

はポイントを証明するフィドルです：http://jsfiddle.net/jfpq6zcg/