如何避免Highcharts翻转X轴的左对齐标签被省略

问题描述 #

我有一个展示港口行程的Highcharts图表，当前X轴标签过长，会随容器宽度被省略/截断。希望实现以下两种效果之一：

• 标签完整显示，推动图表向右扩展（容器可出现横向滚动条）
• 标签自动拆分为两行显示
  尝试过各种设置但无效，怀疑是滚动条导致reserveSpace计算空间错误，但不确定。原代码如下：

Highcharts.chart("container", {
  chart: {
    inverted: true,
  }, 
  legend: {
    enabled: false,
  },
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true,
        format: "{point.y:.0f}",
      },
    }
  },
  series: [
    {
      type: "column",
      data: [
        {
          name: "Rotterdam (Schiedam) --> Rotterdam (Europoort) (11 nm)",
          y: 27,
        },
        { name: "Flushing --> Zeebrugge (22 nm)", y: 23 },
        { name: "Zeebrugge --> Flushing (22 nm)", y: 22 },
        {
          name: "Rotterdam (Europoort) --> Rotterdam (Schiedam) (10 nm)",
          y: 14,
        },
        { name: "Antwerp --> Zeebrugge (47 nm)", y: 11 },
        { name: "Zeebrugge --> Antwerp (47 nm)", y: 10 },
        { name: "Hansweert --> Zeebrugge (36 nm)", y: 9 },
        { name: "Rotterdam (Europoort) --> Zeebrugge (89 nm)", y: 9 },
        { name: "Anna Jacobapolder --> Zeebrugge (51 nm)", y: 8 },
        { name: "Rotterdam (Europoort) --> Antwerp (57 nm)", y: 8 },
        { name: "Zeebrugge --> Hansweert (34 nm)", y: 8 },
        { name: "Zeebrugge --> Rotterdam (Schiedam) (85 nm)", y: 8 },
        { name: "Antwerp --> Rotterdam (Europoort) (60 nm)", y: 7 },
        { name: "Zeebrugge --> Rotterdam (Europoort) (89 nm)", y: 7 },
        { name: "Antwerp --> Flushing (28 nm)", y: 6 },
        { name: "Flushing --> Antwerp (31 nm)", y: 6 },
        { name: "Hansweert --> Rotterdam (Europoort) (49 nm)", y: 6 },
        { name: "Rotterdam (Europoort) --> Anna Jacobapolder (33 nm)", y: 6 },
        { name: "Rotterdam (Europoort) --> Flushing (63 nm)", y: 6 },
        { name: "Flushing --> Rotterdam (Schiedam) (57 nm)", y: 4 },
        { name: "Rotterdam --> Rotterdam (Europoort) (13 nm)", y: 4 },
        { name: "Rotterdam (Botlek) --> Rotterdam (Europoort) (6 nm)", y: 4 },
        { name: "Rotterdam (Europoort) --> Rotterdam (Botlek) (6 nm)", y: 4 },
        { name: "Anna Jacobapolder --> Flushing (30 nm)", y: 3 },
      ],
      dashStyle: "Solid",
    },
  ],
  xAxis: {
    labels: {
      style: {
        fontSize: "9px",
      },
      align: "left",
      reserveSpace: true
    },
    type: "category"
  },
  title: {
    text: "",
  }
})

解决方案1：推动图表向右（容器横向滚动） #

通过让图表内容自然撑开，外层容器提供横向滚动功能，实现标签完整显示：

1. 给容器添加CSS样式：

#container {
  overflow-x: auto;
  white-space: nowrap;
}

2. 修改图表配置，关闭自动宽度计算并预留右侧空间：

chart: {
  inverted: true,
  width: null, // 关闭自动宽度计算，让内容撑开
  spacingRight: 20 // 预留右侧空间，避免标签被截断
},
xAxis: {
  labels: {
    style: {
      fontSize: "9px"
    },
    align: "left",
    reserveSpace: true,
    x: 10 // 调整标签偏移，避免紧贴容器边缘
  },
  type: "category"
}

解决方案2：标签自动换行 #

通过CSS样式让长标签自动拆分为多行，无需改变图表整体宽度：
修改xAxis.labels配置，开启自动换行并限制宽度：

xAxis: {
  labels: {
    style: {
      fontSize: "9px",
      whiteSpace: "normal", // 开启自动换行
      maxWidth: "150px" // 限制标签最大宽度，超出则换行
    },
    align: "left",
    reserveSpace: true,
    x: 5,
    y: 5 // 调整标签位置，让换行后更美观
  },
  type: "category"
}

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