Plotly子图如何显示2个以上的X轴标题及范围？

好消息！Plotly完全支持在同一个子图中添加2个以上的X轴，你之前遇到的T6轴内容不可见的问题，是因为只依赖了side属性（仅支持top/bottom两个位置），而没用到position属性来精准控制每个轴的垂直位置，同时也需要调整Y轴的显示范围来给多轴留出足够空间。

核心解决思路 #

• 给每个额外的X轴设置唯一的position值（取值范围0-1，默认底部轴position=0，顶部轴position=1），通过不同数值让轴在垂直方向上错开排列
• 调整Y轴的domain参数，压缩绘图区域的上下空间，避免轴与绘图内容重叠
• 将对应的数据轨迹（trace）关联到各自的X轴上，确保数据范围匹配

完整实现代码 #

import plotly.graph_objects as go

# 创建主图
fig = go.Figure()

# 添加T5数据集（关联默认X轴）
fig.add_trace(go.Scatter(
    x=[1, 2, 3], y=[4, 5, 6],
    name='T5数据',
    xaxis='x'
))

# 添加T6数据集（关联X轴2）
fig.add_trace(go.Scatter(
    x=[10, 20, 30], y=[4, 5, 6],
    name='T6数据',
    xaxis='x2'
))

# 添加T7数据集（关联X轴3）
fig.add_trace(go.Scatter(
    x=[100, 200, 300], y=[4, 5, 6],
    name='T7数据',
    xaxis='x3'
))

# 配置多X轴布局
fig.update_layout(
    # 底部X轴（T5）
    xaxis=dict(
        title='T5轴',
        position=0,
        domain=[0.1, 0.9]
    ),
    # 中间X轴（T6）
    xaxis2=dict(
        title='T6轴',
        position=0.05,
        domain=[0.1, 0.9],
        anchor='y'
    ),
    # 顶部X轴（T7）
    xaxis3=dict(
        title='T7轴',
        position=1,
        domain=[0.1, 0.9],
        anchor='y'
    ),
    # 调整Y轴范围，给多轴留出显示空间
    yaxis=dict(
        domain=[0.2, 0.8]
    ),
    title='多堆叠X轴示例',
    height=600
)

fig.show()

效果说明 #

通过上述设置，你可以在同一个子图中清晰看到T5、T6、T7三个X轴的标题和对应数据范围，完全实现类似Matplotlib的多层堆叠轴效果。需要注意的是，position的数值可以根据实际需求微调，确保各轴之间不会互相遮挡。

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