Highcharts Gantt X轴标签rotation配置不生效 如何实现标签旋转

失效原因 #

你之前的配置不生效，是因为Highcharts Gantt的X轴默认采用多时间层级结构，顶层xAxis的labels配置只会作用于最底层的时间刻度，上层的年、月等层级的标签需要单独配置，同时Gantt默认开启了标签自动避让，会自动隐藏重叠的标签。

具体修改步骤 #

1. 预留标签展示空间 #

首先调整图表底部边距，给旋转后的标签预留足够位置，在图表配置顶层添加：

chart: {
    marginBottom: 90 // 90度旋转场景下建议设置为80-120，可根据实际效果调整
}

2. 分层级配置X轴参数 #

将X轴配置改为数组形式，为每个时间层级单独设置旋转规则，同时关闭自动旋转和自动隐藏逻辑，参考配置如下：

xAxis: [{
    // 第一层级：年份标签配置
    labels: {
        reserveSpace: true
    }
}, {
    // 第二层级：月份标签配置
    tickPixelInterval: 70,
    dateTimeLabelFormats: {
        week: "%w"
    },
    labels: {
        rotation: 90,
        autoRotation: false, // 关闭系统自动旋转调整
        allowOverlap: false, // 不需要标签重叠可以保持false，需要全部展示可改为true
        reserveSpace: true
    }
}]

单层级X轴适配方案 #

如果你不需要多时间层级展示，只需要保留单一层级的X轴，可以用如下配置关闭多层级逻辑，直接设置旋转即可生效：

xAxis: {
    tickPixelInterval: 70,
    dateTimeLabelFormats: {
        week: "%w"
    },
    labels: {
        rotation: 90,
        autoRotation: false,
        allowOverlap: true
    },
    grid: {
        enabled: false
    }
}

按照上述配置修改后，即可实现X轴标签90度旋转效果，长周期场景下标签也不会被自动隐藏。

内容的提问来源于stack exchange，提问作者Ivan Kozlov