Highcharts plotband label zIndex

Question

나는 plotBand을 축 틱보다 아래에 놓으려고하지만 그 위에 레이블을 붙이려고합니다.

레이블은 밴드의 zIndex를 상속하며이 속성을 지정할 방법이 없으므로 그래프를 그린 후에 zIndex를 변경하지 않아도됩니까?

here 예를 참조하십시오. 레이블이 yAxis 틱 앞에 표시되기를 원합니다.

나는 잠재적 인 솔루션 here을 보았지만 더 나은 방법이 있는지 궁금해하고있었습니다.

Answer 1

Highcharts의 대부분은 SVG를 사용하므로 zIndex 속성을 지원하지 않습니다. this question의 대답은 다음과 같습니다.

"SVG의 Z 색인은 요소가 문서에 나타나는 순서에 따라 정의됩니다. 특정 모양을 맨 위로 가져 오려면 요소 순서를 변경해야합니다."

이것이 바로 .toFront() 함수의 기능입니다. 따라서이 기능을 사용할 수 있습니다.

다음

Highcharts.Chart.prototype.firstRender = (function (func){ 
    return function(){ 
     func.apply(this, arguments); 
     $.each(this.axes, function(){ 
      $.each(this.plotLinesAndBands, function(){ 
       this.label.toFront(); 
      }); 
     }); 
     this.tooltip.label.toFront(); 
     this.seriesGroup.label.toFront(); 
    } 
} (Highcharts.Chart.prototype.firstRender)); 

이 JSFiddle에 대한 예입니다

나는 차트의 첫 렌더링에 따라 앞으로 모든 plotBand의 라벨을 업데이트하는 작은 조각을 썼다. 이것이 당신이 필요로하는 것을 성취하는지 알려주십시오.