Python Plotly垂直堆叠子图：范围滑块仅作用顶部图的问题

核心思路 #

要让范围滑块同时控制两个垂直子图，关键是开启子图X轴共享联动，并正确指定子图的X轴配置项（多子图的轴会按顺序命名为xaxis、xaxis2等，而非统一的xaxis）。

修改后的完整代码 #

import plotly.express as px
import plotly.subplots as sp

# 假设df是已读取的CSV数据
figure1 = px.line(df, x="time", y="temp")
figure2 = px.line(df, x="time", y=['Dosinga','Dosingb'])

# 创建子图时开启X轴共享，确保两个子图X轴联动
this_figure = sp.make_subplots(rows=2, cols=1, subplot_titles=['Temperature', 'Dosing'], shared_xaxes=True)

# 直接将trace添加到对应子图，简化冗余代码
this_figure.add_trace(figure1.data[0], row=1, col=1)
for trace in figure2.data:
    this_figure.add_trace(trace, row=2, col=1)

# 配置整体布局与底部子图的X轴（共享后操作底部滑块会同步顶部）
this_figure.update_layout(
    height=1000, 
    width=2500, 
    title_text="Fishtank",
    xaxis2=dict(
        rangeselector=dict(
            buttons=[
                dict(count=1, label="1D", step="day", stepmode="backward"),
                dict(count=7, label="1W", step="day", stepmode="backward"),
                dict(count=1, label="1M", step="month", stepmode="backward"),
                dict(step="all")
            ]
        ),
        rangeslider=dict(visible=True),
        type="date"
    )
)

this_figure.write_html("/home/pi/shared/Graph.html")

关键改动说明 #

• 开启X轴共享：在make_subplots中添加shared_xaxes=True，让两个子图的X轴完全联动，操作任意一个的缩放、选择都会同步到另一个。
• 指定正确轴名称：垂直子图的X轴依次为xaxis（第一行）、xaxis2（第二行），将滑块配置在xaxis2（底部子图）更符合视觉习惯，避免顶部滑块遮挡子图内容。
• 简化trace添加逻辑：直接通过add_trace将px生成的trace添加到对应子图，省去手动存储列表的冗余步骤。
• 避免重复配置：共享轴后只需配置一个滑块即可同步控制所有子图，无需给每个子图单独设置。

原代码失效原因 #

• 原代码仅配置了xaxis（顶部子图），因此滑块只对顶部生效；
• 单独给figure1配置滑块后，由于后续将trace合并到新子图this_figure中，原figure1的配置不会被继承，导致滑块消失。

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