如何使用Plotly-Dash实现响应式图表

要让Dash中的图表随浏览器窗口或设备自动适配，可从图表容器样式、Plotly布局配置和容器响应式规则三个层面入手，以下是针对你代码的具体修改方案：

基础响应式实现（直接适配窗口缩放） #

1. 开启Figure的响应式布局 #

给每个Plotly图表添加responsive=True配置，让图表的轴、图例、标签等元素自动适配容器尺寸：

fig1 = px.line(a, x=m, y=t1)
fig1.update_layout(responsive=True)  # 开启响应式布局

fig2 = px.bar(a, x=m, y=t2)
fig2.update_layout(responsive=True)

2. 设置dcc.Graph的响应式样式 #

给dcc.Graph设置百分比宽度和视口高度单位，让图表占满父容器并随窗口变化：

dcc.Graph(figure=fig1, style={'width': '100%', 'height': '80vh'}),
dcc.Graph(figure=fig2, style={'width': '100%', 'height': '80vh'})

• width: '100%'：图表宽度完全继承父容器宽度，随窗口缩放自动调整
• height: '80vh'：用视口高度（Viewport Height）定义高度，80vh表示占浏览器窗口高度的80%，也可根据需求调整为百分比或固定值

3. 调整外层容器样式 #

确保承载图表的父容器本身是响应式的，同时优化flex布局的间隙和内边距：

html.Div(children=[...], style={'display': 'flex', 'width': '100%', 'gap': '20px', 'padding': '20px 0'})

• width: '100%'：让父容器占满页面宽度
• gap: '20px'：给两个图表之间添加固定间隙，避免拥挤
• padding：给容器上下添加内边距，优化页面边距

完整修改后的代码 #

import plotly.express as px
from dash import Dash, html, dcc

# 假设a、m、t1、t2为已定义的数据源
fig1 = px.line(a, x=m, y=t1)
fig1.update_layout(responsive=True)

fig2 = px.bar(a, x=m, y=t2)
fig2.update_layout(responsive=True)

app = Dash(__name__, title='me')
app.layout = html.Div(children=[
    html.Div(children=[
        dcc.Graph(figure=fig1, style={'width': '100%', 'height': '80vh'}),
        dcc.Graph(figure=fig2, style={'width': '100%', 'height': '80vh'})
    ], style={'display': 'flex', 'width': '100%', 'gap': '20px', 'padding': '20px 0'}
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

进阶：移动端垂直布局适配 #

如果需要在移动端（比如屏幕宽度小于768px）将横向排列的图表改为垂直排列，可通过CSS媒体查询实现：

app.layout = html.Div(children=[
    html.Div(children=[
        dcc.Graph(figure=fig1, style={'width': '100%', 'height': '80vh'}),
        dcc.Graph(figure=fig2, style={'width': '100%', 'height': '80vh'})
    ], className='chart-container', style={'display': 'flex', 'width': '100%', 'gap': '20px', 'padding': '20px 0'}
    )
])

# 嵌入自定义CSS规则
app.css.append_css({
    'external_url': 'data:text/css;charset=utf-8,' + '''
    .chart-container {
        flex-direction: row;
    }
    @media (max-width: 768px) {
        .chart-container {
            flex-direction: column;
        }
    }
    '''
})

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