如何讓Highcharts在圖表的範圍內保持旋轉的數據標籤？

Question

如果長數據標籤被旋轉，它們可以很容易地擴展到圖表的邊界之外。我希望能夠將標籤保留在圖表的「圖表區域」內。

下面的圖表定義顯示了該問題。 （fiddle here）請注意中間的數據標籤如何脫離圖表頂部。 spacingTop值可以防止它們被截斷，但它們仍然會「突破」圖表的一部分。如果將spacingTop值設置回默認值10，則標籤將被截斷。

chart: { 
    plotBackgroundColor: '#f1f1f1', 
    type: 'columnrange', 
    inverted: false, 
    spacingTop: 100 
}, 
title: { 
    text: '' 
}, 
subtitle: { 
    text: '' 
}, 
xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 
plotOptions: { 
    columnrange: { 
     dataLabels: { 
      enabled: true, 
      rotation: -60, 
      x: 30, 
      yHigh: -55, 
      yLow: 9999, 
      formatter: function() { 
       return this.y + ' degrees Celsius'; 
      } 
     } 
    } 
}, 
series: [{ 
    name: 'Temperatures', 
    data: [ 
     [-9.7, 9.4], 
     [-8.7, 6.5], 
     [-3.5, 9.4], 
     [-1.4, 19.9], 
     [0.0, 22.6], 
     [2.9, 29.5], 
     [9.2, 30.7], 
     [7.3, 26.5], 
     [4.4, 18.0], 
     [-3.1, 11.4], 
     [-5.2, 10.4], 
     [-13.5, 9.8] 
    ] 
}] 

是否有辦法讓圖形區域展開以將標籤保留在其邊框內？

Answer 1

您可以在數據中使用樣式，但是您的繪圖區域仍然很小，您可以擴展該樣式或縮小字體大小。

style: { 
width: '50px' 
     } 

採取look here

Answer 2

您可以使用yAxis.maxPadding繪圖區域中添加額外的空間，請參閱：http://jsfiddle.net/wdb731j9/10/

但是，這仍然不會強迫繪圖區域內dataLabels。我認爲與dataLabels.style.width一起，您可以得到某種可靠的解決方案：http://jsfiddle.net/wdb731j9/11/（請參閱內部評論）。