用負值剪切柱形圖中的標籤

Question

我的柱形圖中的堆疊標籤被剪切出現問題。我有這個列表顯示負值和正值。它顯示與參考數據相比較的百分比，所以0將是該列與參考數據具有相同的值，然後可以是該參考數據的+％或 - ％。我的問題是，當我對某些酒吧的價值很低，並且其中一個酒吧的價格可能高達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 
          }) 
         } 
        } 
       } 
      } 
     }