하이 차트 주석이 렌더링되지 않습니다.

Question

React에서 상위 차트에 주석을 동적으로 추가하려고합니다. 내 앱에서 호버 이벤트가 발생했지만 주석이 렌더링되지 않을 때마다 addAnnotation 함수를 사용하여 새 주석을 추가합니다. 디버거를 코드에 추가했는데 chart.annotations을 호출하면 현재 주석 배열이 있음을 알 수 있지만 렌더링되지 않습니다. 심지어이 함수에서 addPlotLine에 전화를 걸었고 plotline이 차트에 렌더링되었습니다. 내 설정 파일이

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

을 다음과 같이 주석을 추가 할 수있는 내 마우스 오버 기능입니다 나는 "로 연결이"기능에도 불구하고 일한 적이 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가 실패하지 않고 검사 할 수 있습니다.

해피 차트.