하이 차트의 X 축 카테고리 바로 위에 레이블 추가

Question

레이블을 넣으려고했으나 xAxis_categories의 정확한 위치를 그래프로 나타낼 수 없습니다. 그래서 만약 폭이 다양한 텍스트를 방해 도착하고 당신은 한 번 텍스트를 렌더링 할 수 http://jsfiddle.net/akataria/qx4snpvb/8/

startX = chart.xAxis[0].minPixelPadding + chart.xAxis[0].left , 
startY = chart.plotTop, 
debugger; 
r.text('19% yoy increase ', startX , startY) 
.css({ 
color: '#4572A7', 
fontSize: '11px', 
}).add(); 

Answer 1

카테고리 정렬 남아 있지 않은 경우, 다음 텍스트의 폭을 결정하는 요소의 경계 상자에보고, 이 정보를 사용하여 다시 렌더링함으로써 올바르게 배치 된 텍스트를 작성하십시오. 예를 들어

:

var element = r.text('19% yoy increase ', 0 , 0) 
.css({ 
    fontSize: '11px' 
}).add(); 

var width = element.getBBox().width; 
element.destroy(); 

r.text('19% yoy increase ', data[0].plotX + chart.plotLeft - (width/2) , startY) 
.css({ 
    color: '#4572A7', 
    fontSize: '11px'   
}).add(); 

는 데모 this JSFiddle를 참조하십시오.