如何使用Dash保留Plotly图表的布局？

方法1：锁定Plotly图表的原始布局参数 #

你用fig.show()展示的图表有自定义布局（比如特定宽高、边距、标题位置等），但Dash的dcc.Graph组件会默认应用一套样式，导致布局走样。最简单的办法是在传入Dash前，给fig明确设置好和原始图表一致的布局参数：

修改后的示例代码 #

# 假设你已经创建好fig，同步原始图表的布局配置
fig.update_layout(
    width=1200,  # 替换成你原始图表的宽度
    height=800,  # 替换成你原始图表的高度
    margin=dict(l=50, r=50, t=50, b=50),  # 匹配原始图表的边距
    # 其他需要保留的布局属性，比如图例位置、标题样式等都可以在这里补充
)

# 端口设置
port_number = 8050

# 初始化Dash应用
app = dash.Dash(__name__)

# 应用布局
app.layout = html.Div([
    dcc.Graph(figure=fig)
])

# 启动服务
app.run_server(port=port_number)

方法2：调整dcc.Graph组件的显示配置 #

如果不想修改fig本身，可以直接给dcc.Graph设置样式和配置参数，强制匹配原始图表的显示效果：

示例代码 #

port_number = 8050
app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        figure=fig,
        style={'width': '100%', 'height': '800px'},  # 自定义组件的宽高
        config={
            'displayModeBar': True,  # 保留和fig.show()一样的模式栏
            'responsive': False  # 关闭响应式，避免自动调整布局
        }
    )
])

app.run_server(port=port_number)

方法3：嵌入原生Plotly HTML（终极方案） #

如果前两种方法都达不到预期，可以把Plotly图表导出为HTML文件，再用Dash的html.Iframe嵌入，完全复刻原始图表的布局：

示例代码 #

# 先把图表导出为HTML
fig.write_html("my_chart.html")

port_number = 8050
app = dash.Dash(__name__)

app.layout = html.Div([
    html.Iframe(
        srcDoc=open("my_chart.html", "r").read(),
        style={'width': '1200px', 'height': '800px', 'border': 'none'}
    )
])

app.run_server(port=port_number)

注意点 #

• 布局差异大多是因为Dash给dcc.Graph加了默认样式，明确设置fig.update_layout()的参数是最省心的方式。
• 如果你的图表是用Plotly Express创建的，检查下fig.layout.autosize是否为True，要是的话改成False，避免自动缩放布局。

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