사용자 정의 Highcharts 도면에서 레이블 제거

Question

사용자 정의 Highcharts drawing을 작성했으며 사용자가 요소 위에 마우스를 놓으면 레이블을 표시하는 위치에 있습니다. 그러나 mouseout에서 레이블을 제거하려고합니다.

$('#container').highcharts({ 
    chart: { 
    backgroundColor: 'white', 
    events: { 
     load: function() { 
     var ren = this.renderer; 

     ren.rect(50, 50, 60, 50, 0) 
      .attr({ 
      'stroke-width': 2 
      }) 
      .on('mouseover', function() { 
      ren.label('Foo') 
      .attr({ 
       fill: Highcharts.getOptions().colors[0], 
       padding: 10, 
       r: 5, 
       zIndex: 8 
      }) 
      .css({ 
       color: '#fff' 
      }) 
      .add(); 
      }) 
      .on('mouseout', function() { 
      // need to remove the Foo label here 
      }) 
      .add(); 
     } 
     } 
    } 
    } 
}); 

어떤 아이디어 :

이것은 내가 지금까지 가지고 무엇인가?

Answer 1

당신은 요소를 이런 식으로 만들 때 :

var myRect = renderer.rect(x, y, w, h, r); 

은 다음 myRect 변수를 사용하여 RECT에 액세스 할 수 있습니다.

이제 Element 개체에서 모든 메소드를 호출 할 수 있습니다 : 당신이 [바이올린]을 설정할 수 있습니다 경우

myRect.add(); 
myRect.on(...); 
myRect.destroy(); // remove element from DOM