如何在Chart.js中实现多个堆叠图表的x轴刻度对齐

通用核心思路 #

所有可视化库的解决逻辑都是统一固定三个子图的绘图区域左边界位置，抵消不同宽度y轴标签带来的偏移，让所有子图的x轴物理长度、起始位置完全一致。

1. Python Matplotlib 方案 #

• 使用gridspec创建统一的网格布局，不要单独创建无关联的subplot
• 创建子图时开启sharex=True参数，Matplotlib会自动处理x轴对齐逻辑，即使y轴标签宽度不同也不会偏移，示例代码：

import matplotlib.pyplot as plt

# sharex=True开启x轴共用，自动对齐刻度
fig, (ax1, ax2, ax3) = plt.subplots(nrows=3, ncols=1, sharex=True, figsize=(8, 9))
# 分别绘制三个折线图
ax1.plot([1,2,3,4], [10,20,15,25])
ax2.plot([1,2,3,4], [1000, 2000, 1500, 3000])
ax3.plot([1,2,3,4], [0.1, 0.5, 0.3, 0.8])
# 单独配置每个y轴标签，宽度不同也不会影响x轴对齐
ax1.set_ylabel("短标签")
ax2.set_ylabel("非常长的y轴标签测试")
ax3.set_ylabel("中等长度标签")
plt.show()

• 若手动创建子图未开启sharex，可统一设置所有子图的左边界固定值：

for ax in [ax1, ax2, ax3]:
    pos = ax.get_position()
    # 参数依次为[左边界占比, 下边界占比, 宽度占比, 高度占比]
    ax.set_position([0.15, pos.y0, 0.75, pos.height])

2. 前端ECharts 方案 #

• 给三个grid组件统一配置相同的left、right属性，固定绘图区的左右边界
• 示例配置片段：

option = {
  // 三个grid统一设置左右边距，仅修改上下位置
  grid: [
    {left: '15%', right: '10%', top: '5%', height: '25%'},
    {left: '15%', right: '10%', top: '36%', height: '25%'},
    {left: '15%', right: '10%', top: '67%', height: '25%'}
  ],
  // 三个x轴分别绑定对应grid，中间的x轴可隐藏节省空间
  xAxis: [
    {gridIndex: 0, data: ['1月','2月','3月','4月']},
    {gridIndex: 1, data: ['1月','2月','3月','4月'], show: false},
    {gridIndex: 2, data: ['1月','2月','3月','4月']}
  ],
  // 三个y轴分别绑定对应grid，独立配置标签、刻度范围
  yAxis: [
    {gridIndex: 0, name: '短标签'},
    {gridIndex: 1, name: '超长的y轴标签测试'},
    {gridIndex: 2, name: '中等长度标签'}
  ],
  // 系列数据配置省略
}

3. R ggplot2 方案 #

• 使用patchwork包垂直拼接图表，通过统一设置所有子图的左边距实现对齐
• 也可使用ggh4x包的facet_grid()配合独立y轴配置，facet默认会自动对齐x轴
  示例代码：

library(ggplot2)
library(patchwork)

# 分别生成三个折线图
p1 <- ggplot(data1, aes(x=date, y=value1)) + geom_line() + ylab("短标签")
p2 <- ggplot(data2, aes(x=date, y=value2)) + geom_line() + ylab("非常长的y轴标签")
p3 <- ggplot(data3, aes(x=date, y=value3)) + geom_line() + ylab("中等长度标签")

# 垂直拼接+统一设置左内边距，自动对齐x轴
p1 / p2 / p3 & theme(plot.margin = unit(c(5,5,5,30), "pt"))

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