如何将Highcharts柱状图的x轴标签与柱子对齐？

针对你提供的反转柱状图配置，可通过以下几项调整实现标签与柱子精准对齐：

• 调整x轴标签的对齐方式与偏移
  在xAxis.labels中添加对齐与偏移属性，适配反转后的布局，让标签对应柱子位置：

  labels: {
      formatter() {
          if (this.value !== 0) {
              return this.value
          }
      },
      style: {
          fontSize: 11,
          fontWeight: 'bold',
          color: '#000'
      },
      align: 'right', // 设置标签对齐方向
      x: -8 // 根据实际柱子位置调整水平偏移量，负数为向左偏移
  }
  

• 校准x轴刻度定位（可选）
  若标签仍有偏移，可开启x轴刻度定位逻辑（即使隐藏刻度线），让标签基于柱子中心定位：

  xAxis: {
      tickWidth: 0,
      type: 'category',
      lineWidth: 0,
      tickPosition: 'inside', // 让刻度定位到柱子内侧
      tickLength: 0, // 隐藏刻度线但保留定位逻辑
      // ... 其他原有配置
  }
  

• 调整柱子间距（可选）
  若柱子间距过大导致错位，可在series配置中调整间距参数，让柱子位置与分类标签一一对应：

  series: [{
      // ... 你的数据配置
      groupPadding: 0,
      pointPadding: 0.1 // 根据需求微调柱子间距
  }]
  

修改后的完整配置示例：

chart: {
    spacing: [0, 0, 0, 0],
    type: 'column',
    inverted: true,
    height: 160,
    marginBottom: 70
},
xAxis: {
    tickWidth: 0,
    type: 'category',
    lineWidth: 0,
    tickPosition: 'inside',
    tickLength: 0,
    labels: {
        formatter() {
            if (this.value !== 0) {
                return this.value
            }
        },
        style: {
            fontSize: 11,
            fontWeight: 'bold',
            color: '#000'
        },
        align: 'right',
        x: -8
    }
},
series: [{
    data: [/* 你的数据内容 */],
    groupPadding: 0,
    pointPadding: 0.1
}]

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