음수 값이있는 세로 막 대형 차트의 레이블 자르기

Question

내 기둥 형 차트의 스택 레이블이 잘리는 문제가 있습니다. 나는 음수 값과 양수 값을 모두 표시하는 세로 막 대형 차트가 있습니다. 참조 데이터와 비교 한 백분율을 나타내므로 열이 참조 데이터와 동일한 값을 가지면 해당 참조 데이터와 비교하여 + % 또는 - %가 될 수 있습니다. 내 문제는 일부 막대에 대해 매우 낮은 값을 갖고 막대 중 하나에서 30 %를 차지하는 경우 차트의 +면에 레이블이 잘 리게됩니다. 레이블을 항상 완벽하게 볼 수 있도록이 코드를 코딩 할 수있는 방법이 있습니까? 고객은 라벨이 그래프에서와 같이 90도 회전해야한다는 요구 사항을 가지고 있습니다.

이 문제를 해결하는 방법에 대한 통찰력을 미리 감사드립니다.

$(function() { 
    $('#container').highcharts({ 
     chart: { type: 'column', animation: false }, 
     title: { text: null }, 
     xAxis: { categories: ['Category 1', 'Category 2', 'Category 3'], labels: { style: { fontSize: '1.2em'}} }, 
     yAxis: { 
      allowDecimals: false, title: { text: '' }, 
      labels: { 
       formatter: function() { return this.value === 0 ? '0% (Index)' : this.value + '%'; }, 
       style: { color: '#4572A7'} 
      }, 
      stackLabels: { 
       enabled: true, style: { color: 'black', fontSize: '1.2em' }, 
       formatter: function() { 
        return this.stack + ((this.total && this.total != 0) ? ': ' +    
          Math.round(this.total).toFixed(0) + '%' : ''); 
       }, 
       rotation: -90, x: -5, verticalAlign: 'bottom', align: 'left', textAlign: 'left' 
      } 
     }, 
     plotOptions: { column: { stacking: 'normal', pointPadding: 0.3 }, series: { shadow: false, animation: false } }, 
     tooltip: { enabled: false }, 
     legend: { borderWidth: 1, shadow: false }, 
     series: [ 
      { data: [34, 64, -443], stack: 'Stack 1'} 
     ]  
    }); 
}); 

(첨부 참조 jsFiddle : http://jsfiddle.net/ewCZa/) 나는 클리핑 라벨을 방지하기 위해 간단한 솔루션을 만들었습니다

Answer 1

: http://jsfiddle.net/43fBB/

 events: { 
      load: function(){ 
       var chart = this, 
        cols = chart.series[0], 
        stacks = chart.yAxis[0].stacks, 
        i, 
        j; 
       for(i in stacks){ 
        var stack = stacks[i]; 
        for(j in stack){ 
         var label = stack[j].label, 
          labelBB = label.getBBox(), 
          diff = labelBB.y - labelBB.height; 

         if(diff < 0) { 
          label.attr({ 
           translateY: - diff 
          }) 
         } 
        } 
       } 
      } 
     }