如何调整Plotly多子图中共享Range Selector的位置至底部

我懂你遇到的这个麻烦——给多子图加共享Range Selector时，它默认会附着在第一个子图的x轴上，结果卡到两个子图中间去了。要把它移到图表底部，只需要把Range Selector绑定到最下方子图的x轴，同时保持所有x轴同步就行。

修改后的完整代码 #

from plotly.subplots import make_subplots
from plotly import graph_objects as go
import pandas as pd

df = pd.read_csv("https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv")
df.columns = [col.replace("AAPL.", "") for col in df.columns]

fig = make_subplots(2, 1)
fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.High)), row=1, col=1)
fig.add_trace(
    go.Scatter(x=list(df.Date), y=list(df.Low)), row=2, col=1)

# 关键修改：把rangeselector和rangeslider绑定到第二个子图的x轴（xaxis2）
fig.update_layout(
    xaxis2=dict(
        rangeselector=dict(
            buttons=list([
                dict(count=1, label="1m", step="month", stepmode="backward"),
                dict(count=6, label="6m", step="month", stepmode="backward"),
                dict(count=1, label="YTD", step="year", stepmode="todate"),
                dict(count=1, label="1y", step="year", stepmode="backward"),
                dict(step="all")
            ])
        ),
        rangeslider=dict(
            visible=True
        ),
        type="date"
    )
)

# 保持所有x轴同步匹配，确保Range Selector操作时所有子图联动
fig.update_xaxes(matches='x2')
fig.show()

核心修改点说明 #

• 绑定到xaxis2：第二个子图是底部的图，它的x轴（xaxis2）对应的控件会自动显示在整个图表的最下方，不会再卡在中间。
• 更新x轴匹配规则：把原来的matches='x'改成matches='x2'，确保操作底部的Range Selector时，两个子图的x轴范围会同步变化，保持联动效果。

这样调整后，Range Selector就会稳稳待在图表底部，同时完全不影响子图的联动功能。

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