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

您可以使用$(".regular.special_div#my_id")在绘图区域添加额外空间，请参阅：http://jsfiddle.net/wdb731j9/10/

但是这仍然不会强制绘图区内的数据标签。我认为与yAxis.maxPadding一起，您可以获得某种可靠的解决方案：http://jsfiddle.net/wdb731j9/11/（请参阅内联评论）。

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

2 个答案: