如何让Highcharts将旋转的数据标签保持在图表的范围内？

如果旋转长数据标签，它们可以很容易地延伸到图表的边界之外。我希望能够保持标签在图表的“图形区域”内

下面的图表定义说明了这个问题。（）注意中间数据标签是如何从图表顶部脱落的。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]
    ]
}]

---

有没有办法使图形区域展开以将标签保持在其边框内？

您可以在datalables中使用样式，但绘图区域仍然很小，您应该展开该区域或缩小字体大小

style: {  
width: '50px'
       }

---

以

为例，您可以使用

yAxis.maxPadding

在打印区域上添加额外空间，请参见：

---

但这仍然不会在绘图区域内强制使用数据标签。我认为与

dataLabels.style.width

一起，您可以得到某种可靠的解决方案：（参见注释内联）。

使用

style.width

我们还可以使用

textfoverflow

（而不是换行）：