ハイチャートラベルを再描画

Question

私はthis JSFIDDLEの作業を進めており、チャートのポイントにラベルを追加する方法を示しています。これは、チャートが反応していない場合にラベルの位置を固定するために問題なく動作します。フィドルの幅を変えて、ラベルは元の位置に座っています。ラベルを最後の列の上に置いておきたい。

私はloadとredrawイベントを使用しようとしていますが、近くにありますが、新しいものを作成する前にラベルを破棄する必要があります。

events: { 
    load: function() { 
     var point = this.series[0].points[2]; 
     this.renderer.label(
       '<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop 
     ) 
     .css({ 
      color: '#FFFFFF' 
     }) 
     .attr({ 
      fill: 'rgba(0, 0, 0, 0.75)', 
      padding: 8, 
      r: 5, 
      zIndex: 6 
     }) 
     .add(); 
    }, 
    redraw: function() { 
     var point = this.series[0].points[2]; 
     this.renderer.label(
       '<div class="text-center">GOAL TO REACH</div>', 270, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop 
     ) 
     .css({ 
      color: '#FFFFFF' 
     }) 
     .attr({ 
      fill: 'rgba(0, 0, 0, 0.75)', 
      padding: 8, 
      r: 5, 
      zIndex: 6 
     }) 
     .add(); 
    } 
} 

グラフの幅が変更されたときにラベルをポイントします。

ツールチップを使用しようとしましたが、最初の2つの列から無効にするときに問題があります。私は大丈夫ツールチップを再描画することができますが、

Answer 1

チェック私はグローバルスコープに変数を追加JSFiddle

更新var theLabel;

が続いチャート初期のドローで、theLabel = chart.renderer.label(...)を設定し、このうち、他のすべての列からそれを無効にすることができませんでしたその後

redraw: function() { 
    theLabel.destroy(); 
     point = this.series[0].points[2]; 
     theLabel = this.renderer.label('<div class="text-center">Reach 10 active subscriptions<br/>and enjoy a one year FREE membership!</div>', this.plotWidth - 200, 50, 'callout', point.plotX + this.plotLeft, point.plotY + this.plotTop) 
    .css({ 
     color: '#FFFFFF' 
    }) 
    .attr({fill: 'rgba(0, 0, 0, 0.75)', 
     padding: 8, 
     r: 5, 
     zIndex: 6 
    }) 
    .add(); 
} 

注でいます：私は、私は右手のそれは、多かれ少なかれ取得するthis.plotWidth - 200でそれをプロットする代わりにx = 270でそれをプロットするのthis

にchartを変更

オリジナルのラベルを削除するにはtheLabel.destroy()を呼び出し

1. シェブロンは常に赤いバーを指しています。

希望これはあなた