ハイチャートの注釈がレンダリングされない

Question

Reactの高チャートに注釈を動的に追加しようとしています。私はaddAnnotation関数を使用して、私のアプリでホバーイベントが発生したときに新しいアノテーションを追加しますが、アノテーションはレンダリングされません。私は自分のコードにデバッガを落としました。chart.annotationsを呼び出すと、現在、注釈の配列がありますが、レンダリングされていません。私はこの関数でaddPlotLineを呼び出していても、プロットラインがグラフに表示されます。私の設定ファイルは、この

chart: { 
     annotations: [{ 
     labelOptions: { 
      backgroundColor: 'rgba(0, 0, 0, 0.5)', 
      verticalAlign: 'top', 
      align: 'right', 
     } 
     }], 
     annotationsOptions: { 
     }, 
    .... some lots more config options 
} 

のように見え、私が見つけた

if(isNumber(value)) 
    //this renders a plotline 
    chart.xAxis[0].addPlotLine(baseChartHandle.generateInteractivePlotLine(value)); 
    // this doesn't render my annotation however 
    chart.addAnnotation({ 
     linkedTo: value, 
     title: { 
     text: "It works!" 
     } 
    }); 
} 

Answer 1

を次のように注釈を追加するために、私のホバー上の関数であること、私は「linkedTo」機能は、にも関わらず、働いたことはないHighchartsを使用して注釈を追加したとき私の試練。

ポイントにGUIDを追加しても、それを適用することはできませんでした。私はあなたのケースでxとyの値でそれを追加することを提案し、代わりにポイントを見つける。ここで私は成功し、過去に注釈を追加した方法です：

series.data.forEach(function (point) { 

       var annotationObject = 
        { 
         id: point.id, 
         labelOptions: { 
          y: 15, 
          verticalAlign: 'bottom', 
          distance: 25 
         }, 
         labels: [] 
        }; 

       } 

       var text = <get text you want to push>; 

       annotationObject.labels.push(
        { 
         point: { 
          xAxis: 0, 
          yAxis: 0, 
          x: point.x, 
          y: point.y 
         }, 
         text: text 
        } 

       ); 

       _chart.addAnnotation(annotationObject); 
      }); 

ヘッドアップとして、注釈を削除する使用しているとき、私はまたHighChartsのバグを発見しました。各点は、上記のようなIDが必要になりますが、それは、この行によって呼び出される必要があります。

  _chart.removeAnnotation(id); 

それはあなたが後に何かをしようとした場合しかし、あなたはhighchartsからの苦情のたくさんを取得します、注釈を削除します、それは壊れるでしょう。私はannotations.jsに、ここで答えを見つけた：

赤いボックスは、私が追加されたコードです。 removeAnnotation（ann.id）を実行した後にrerendersすると、labelsオブジェクトがnullであるため失敗します。このチェックを追加すると、labelCollectorsが失敗することなくこれを行うことができます。

ハッピーチャート。