라벨이 긴 경우 높은 차트 막대 차트 라벨이 그래프와 겹칩니다.

Question

공구 팁을 사용하려면 xAxis 라벨이 필요합니다. 그러나 포맷터를 사용하여 도구 설명을 추가하면 긴 레이블은 오른쪽으로 밀기보다는 차트와 겹치는 경향이 있습니다. 또한 이것은 레이블에 공백이있는 경우에만 발생합니다. 공백을 제거하면 올바르게 작동하고 차트가 오른쪽으로 밀려납니다. http://jsfiddle.net/W5wag/44

$(function(){ 
    var chart1; 
    $(document).ready(function(){ 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'], 
      labels: { 
       formatter: function() { 
        return '<span title="abc">' + this.value + '</span>'; 
       }, 
       useHTML: true, 
       style: { 
        whiteSpace: 'nowrap' 
      } 
     }, 
     }, 

    }; 

    options.series = [{ 
      data: [3, 4, 4, 3, 9] 
     }]; 
    chart1 = new Highcharts.Chart(options); 
    }); 
}) 

Answer 1

내가 레이블을 렌더링 한 후 몇 가지 코드를 실행하려고하지만, 내 경험이 제한 비트입니다 :이 문제는이 바이올린에 표시됩니다. 나는 x 축 레이블 중 최대 너비를 찾고, 부모의 최소 너비 (아래 참조)로 설정하고 다시 그리기를 트리거하는 레이블을 무효화하려고합니다. 어쩌면 그렇게 할 수있는 방법을 찾을 수 있습니다.

에 공백이없이 텍스트를 설정하고 레이아웃이 완료되면, 이후에 추가 :

다른 모든 실패하면 다음 빠른 앤 더러운 솔루션 "속임수"수 있습니다.

window.setTimeout(()=>document.querySelector('span[title=abc]') 
        .innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500); 

또는 (하지만 레이블이 얼마나 넓은 알고 요구하는) 페이지에 CSS를 추가하면 useHTML 옵션을 사용하지 않으면

.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }