Plotly子图x轴列名移至首行顶部的实现问题

我使用Dash+Plotly构建了可视化仪表盘，核心代码如下：

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import pandas as pd

app = dash.Dash(__name__)

df = pd.read_csv('data256.csv')

app.layout = html.Div([
    dcc.Dropdown(
        id='graph-type',
        options=[
            {'label': 'Sunburst', 'value': 'sunburst'},
            {'label': 'Barplot', 'value': 'barplot'}
        ],
        value='sunburst'
    ),
    dcc.Dropdown(
        id='zone',
        options=[{'label': i, 'value': i} for i in df['Zones'].unique()],
        value='National'
    ),
    dcc.Graph(id='indicator-graph')
])

@app.callback(
    Output('zone', 'style'),
    Input('graph-type', 'value'))
def toggle_zone_dropdown(graph_type):
    if graph_type == 'sunburst':
        return {'display': 'none'}
    else:
        return {'display': 'block'}

@app.callback(
    Output('indicator-graph', 'figure'),
    Input('graph-type', 'value'),
    Input('zone', 'value'))
def update_graph(graph_type, zone):
    if graph_type == 'sunburst':
        fig = px.sunburst(df, path=['Zones', 'Product', 'Indicator', 'Metric'], values='Value')
    else:
        dff = df[df['Zones'] == zone]
        fig = px.bar(dff, x='Product', y='Value', color='Metric', barmode='group', facet_row='Indicator')
        fig.update_layout(height=800)
    return fig

if __name__ == '__main__':
    app.run_server(debug=True, host="0.0.0.0", port=8080)

当选择Barplot时，facet_row布局的条形图默认将X轴标签显示在最后一行底部，我尝试用以下代码修改：

fig.update_layout(height=800,
    xaxis=dict(
        side='top'
    )
)

但修改后X轴标签出现在第三和第四行子图之间，位置错误，请问如何正确实现将X轴标签移至第一行顶部的需求？

问题出在facet_row会生成多个独立子图，每个子图对应xaxis、xaxis2、xaxis3...这样的ID，直接修改xaxis只会调整第一个子图的X轴位置，无法统一控制所有子图的X轴显示逻辑。正确的做法是遍历所有子图的X轴，统一设置位置为顶部，并只保留第一行子图的X轴标签：

修改update_graph函数中Barplot分支的代码如下：

else:
    dff = df[df['Zones'] == zone]
    fig = px.bar(dff, x='Product', y='Value', color='Metric', barmode='group', facet_row='Indicator')
    fig.update_layout(height=800)
    
    # 遍历所有子图的X轴，设置位置为顶部
    for axis_id in fig.layout:
        if axis_id.startswith('xaxis'):
            fig.layout[axis_id]['side'] = 'top'
            # 仅保留第一个X轴的标签，其余子图隐藏X轴标签
            if axis_id != 'xaxis':
                fig.layout[axis_id]['title']['text'] = ''
    
    # 调整顶部边距和子图间距，避免标签重叠
    fig.update_layout(
        margin=dict(t=100),  # 增大顶部边距容纳X轴标签
        facet_row_spacing=0.05  # 调整子图垂直间距
    )

代码说明： #

• 遍历所有以xaxis开头的布局对象，将每个子图的X轴位置设为top
• 只保留第一个子图（xaxis）的X轴标签，其余子图的X轴标签清空，避免重复显示
• 调整顶部边距和子图间距，确保X轴标签不会和子图内容重叠

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