레이다 차트의 x 축 레이블 워드 랩을

Question

하이 차트에서 레이더 차트의 X 축 레이블을 조정하려고 시도했지만 2 개의 레이블을 수정할 수 없었습니다. 작은 너비 화면에서 일부 레이블이 완전히 보이지 않습니다.

https://jsfiddle.net/xs9zb3f6/6/enter code here

할 수있는 사람의 도움을하시기 바랍니다 : 여기에 스크린 샷 img

바이올린 링크가 첨부? 나는 라벨을 레이다 차트 또는 워드 랩 내부에 추가로 정렬하여 작은 화면에 표시 할 때 단어를 자르지 않도록하고 싶습니다.

Answer 1

레이블을 이동하는 고유 한 기능을 작성할 수 있습니다.

레이블 요소의 bbox를 가져 와서 컨테이너 내부에 있는지 확인하십시오 (> = 0 또는 < = 컨테이너의 너비). bbox를 가져 오는 것에 대한 한 가지주의 사항 - 라벨이 회전되므로 bbox에는 아직 회전하지 않은 요소의 매개 변수가 있음을 의미합니다. 회전이 텍스트 너비를 많이 변경하지 않는 경우에는 픽셀을 추가 할 수 있습니다. 그 차이를 상쇄. 부하에

function moveLabels() { 
    const ticks = this.xAxis[0].ticks; 
    const safeDistance = 10; 

    Object.keys(ticks).forEach(value => { 
    const label = ticks[value].label; 
    const bbox = label.getBBox(true); 

    if (bbox.y >= 0) { 
     if (bbox.x - safeDistance < 0) { 
     label.attr({ 
      x: label.xy.x + Math.abs(bbox.x - safeDistance) 
     }) 
     } else if (bbox.x + bbox.width + safeDistance > this.chartWidth) { 
     label.attr({ 
      x: label.xy.x - (bbox.x + bbox.width + safeDistance - this.chartWidth) 
     }); 
     } 
    } 
    }) 
} 

이동 라벨/이벤트를 다시 그리기 :

chart: { 
polar: true, 
    type: 'line', 
    events: { 
     load: moveLabels, 
     redraw: moveLabels 
    } 
    }, 

예를

: https://jsfiddle.net/nd5fob5d/