Plotly Dash 实现Indicator图嵌入dash_bootstrap_components卡片的适配方法

当前出现图表溢出、无法自适应的本质是两个配置缺失+硬编码尺寸冲突：

• Figure层面硬编码了固定宽高、关闭了自动尺寸适配，导致画布生成时就被固定为200x200的像素值，无法跟随容器缩放
• dcc.Graph组件层面未开启容器响应开关，默认渲染尺寸不受父级CardBody约束，加上外层多嵌套的冗余div、尺寸不匹配的固定高度，最终造成图表溢出卡片边界。

1. 调整Indicator图表的布局配置 #

删除硬编码的固定宽高参数，开启图表自动尺寸适配，让Figure的渲染尺寸完全跟随父容器变化：

fig3 = go.Figure()
fig3.add_trace(go.Indicator(
    mode = "number+delta",
    number = {"font":{"size":40},'prefix': "$"},
    value = 2045672,
    delta = {'reference': 30000},
    gauge = {'shape': "bullet"},
    title = {"text": "On Hand<br><span style='font-size:0.9em;color:gray'></span>"},
    domain = {'x': [0, 1], 'y': [0, 1]},
))
# 核心修改部分
fig3.update_layout(
    paper_bgcolor = "rgba(0,0,0,0)",
    plot_bgcolor = "rgba(0,0,0,0)",
    autosize=True, # 替换原来的autosize=False
    # 删除硬编码的width=200、height=200配置
)
fig3.update_traces(align="center", selector=dict(type='indicator'))

2. 给Graph组件开启响应式适配 #

给dcc.Graph添加responsive=True参数，同时设置100%宽高的样式，让组件完全填充CardBody的可用空间，不产生溢出：

# 替换原来的dcc.Graph写法
dcc.Graph(
    figure=fig3,
    responsive=True, # 开启组件层面的尺寸响应
    style={"height": "100%", "width": "100%"}
)

3. 清理冗余嵌套、统一容器尺寸逻辑 #

去掉无意义的多层嵌套div，修正各层级容器尺寸不匹配的问题（原来的外层row设置110px固定高度，内部Card设置128px高度，本身就存在高度差），调整后的完整布局代码如下：

html.Div(children=[
    dbc.Row(
        [
            dbc.Col(
                dbc.Card(
                    [
                        dbc.CardBody(
                            [
                                dcc.Graph(
                                    figure=fig3,
                                    responsive=True,
                                    style={"height": "100%", "width": "100%"}
                                )
                            ]
                        )
                    ],
                    style={"width": "15rem", "height": "8rem"}
                ),
                width=3,
                className="mx-auto"
            )
        ],
        className="p-0",
        style={'background-color': '#f7f7f7', 'height': '8rem'} # 和内部Card高度保持一致，避免溢出
    )
], className="full-width p-0", style={'background-color': '#fffffff'})

• 不要在Figure的update_layout中硬写width/height参数，这类参数一旦设置，会直接断开图表和父容器的尺寸绑定，无论外层样式怎么调整，图表都会按固定像素渲染
• dcc.Graph的responsive=True是必须开启的参数，这个配置会让组件监听父容器的尺寸变化，实时重绘图表内容，不开的话哪怕Figure设了autosize=True，图表也会保持初始尺寸不随容器变化
• 多层无意义的div嵌套容易造成CSS样式冲突，在使用dash-bootstrap-components布局时，优先直接使用内置的dbc.Row、dbc.Col做栅格布局，减少自定义div带来的样式错位
• 如果需要缩小Indicator的显示字号，直接在Indicator的number、title配置里调整font size即可，不要靠压缩图表的固定尺寸适配

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