Plotly-Dash中Card组件内箱线图更新异常问题求助

你的代码出现重复新增Card的核心问题有两个：一是重复使用同一个id（box-plot同时被外层Div和内部Graph使用），导致每次回调返回的内容都会嵌套进原Div；二是每次回调都重新生成整个Card组件，而非仅更新图表数据。

以下是修正后的完整代码，以及关键修改说明：

from dash import Dash, html, dcc, Input, Output
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
import numpy as np
import plotly.graph_objects as go

def render(app: Dash):
    # 固定Card框架，仅将Graph的id设为唯一标识
    return html.Div(
        dbc.Card([
            dbc.CardHeader("Box plot"),
            dbc.CardBody(dcc.Graph(id="box-plot-graph"))
        ])
    )

def getFigureRow(app:Dash):
    return dbc.Row([dbc.Col([render(app)], width=12)], align='center')

def getDropdownRow(app: Dash):
    return html.Div(
        children=[dcc.Dropdown(
            id="country-dropdown",
            options=["DE", "FR", "ES"],
            value="DE",
            multi=False
        )]
    )

def create_layout(app: Dash):
    print("create_layout(...) called")
    return html.Div([
        html.H1(app.title),
        dbc.Tabs([
            dbc.Tab(
                dbc.Card(
                    dbc.CardBody([
                        getDropdownRow(app),
                        getFigureRow(app),
                    ]), body=True), label="Visualize")
        ])
    ])

if __name__ == "__main__":
    app = Dash(external_stylesheets=[dbc.themes.DARKLY])
    load_figure_template("darkly")
    app.title = "Dummy"
    app.layout = create_layout(app)

    # 直接更新Graph的figure属性，而非替换整个Card
    @app.callback(
        Output("box-plot-graph", "figure"),
        Input("country-dropdown", "value")
    )
    def update_boxplot(country: str):
        # 可根据country参数替换为对应真实数据，此处保留随机数用于测试
        fig = go.Figure(data=[
            go.Box(y=np.random.randn(50) - 1),
            go.Box(y=np.random.randn(50) + 1)
        ])
        fig.update_layout(title=f"Box Plot for {country}")
        return fig

    app.run(debug=True)

关键修改点 #

1. 移除重复id：将Graph的id改为box-plot-graph，确保每个组件id唯一，避免嵌套渲染问题。
2. 固定布局结构：Card的框架（标题+图表容器）仅在初始布局中生成一次，不再在回调中重复创建。
3. 回调目标调整：将回调的输出目标从外层Div的children改为Graph组件的figure属性，直接更新图表数据而非替换整个组件。
4. 逻辑与布局分离：回调逻辑单独定义，布局函数仅负责生成静态结构，代码结构更清晰。

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