如何在dbc.Card中展示随导航栏变化的交互式成功/失败计数指标？

完全可以实现随导航栏选择动态更新成功/失败计数的功能，只需对现有代码做以下关键修改：

关键修改点 #

• 为卡片中的计数文本添加可被回调更新的ID
• 扩展回调函数，同时输出饼图、成功计数、失败计数三个结果
• 修正下拉菜单初始值，避免加载错误

修改后的完整代码 #

import pandas as pd
import numpy as np
import plotly.graph_objs as go
import dash
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

url="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/datasets/spacex_launch_dash.csv"
spacex_df = pd.read_csv(url)
spacex_df.rename(columns={'Launch Site':'Site'}, inplace=True)

external_stylesheets = [dbc.themes.SPACELAB, dbc.icons.BOOTSTRAP]
app = dash.Dash(__name__, external_stylesheets = external_stylesheets)

# 为计数文本添加ID，用于动态更新
success_card = dbc.Card(
    [
        dbc.CardHeader("Launch Metrics"),
        dbc.CardBody(
            [
                html.H6("Success Count", className="card-title"),
                html.P(id='success-count-text', className="card-text h3"),
            ]
        ),
    ],
    className='text-center m-4'
)

failure_card = dbc.Card(
    [
        dbc.CardHeader("Launch Metrics"),
        dbc.CardBody(
            [
                html.H6("Failure Count", className="card-title"),
                html.P(id='failure-count-text', className="card-text h3"),
            ]
        ),
    ],
    className='text-center m-4'
)

nav_bar =  html.Div([
     html.P("site-dropdown:"),
     dcc.Dropdown(
       id='Site', 
       value='CCAFS LC-40',  # 修正初始值为有效站点
       options=[{'value': x, 'label': x} 
                for x in ['CCAFS LC-40', 'CCAFS SLC-40', 'KSC LC-39A', 'VAFB SLC-4E']],
       clearable=False
   ),
])

app.layout = dbc.Container([
    dbc.Row([
        dbc.Col(html.Div(nav_bar, className="bg-secondary h-100"), width=2),
        dbc.Col([
            dbc.Row([
                dbc.Col(success_card),
            ]),
            dbc.Row([
                dbc.Col(dcc.Graph(id = 'pie-chart'), style={"padding-bottom": "10px"}),
            ]),
            dbc.Row([
                dbc.Col(dcc.Graph(id = "bar-chart")),
            ]),
        ], width=5),
        dbc.Col([
            dbc.Row([
                dbc.Col(failure_card),
            ]),
            dbc.Row([
                dbc.Col(dcc.Graph()),
            ], className="h-100"),
        ], width=5),
    ])
], fluid=True)

# 扩展回调，同时输出饼图、成功计数、失败计数
@app.callback(
    [Output("pie-chart", "figure"),
     Output("success-count-text", "children"),
     Output("failure-count-text", "children")], 
    [Input("Site", "value")])

def generate_chart_and_counts(value):
    pie_data = spacex_df[spacex_df['Site'] == value]
    success_count = sum(pie_data['class'] == 0)
    failure_count = sum(pie_data['class'] == 1)
    
    # 生成饼图
    fig = go.Figure(data=[go.Pie(labels=['success','failure'], values=[success_count, failure_count])])
    fig.update_layout(title=f"Site: {value}")
    
    # 返回三个结果：饼图对象、成功计数值、失败计数值
    return fig, success_count, failure_count

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

代码说明 #

1. 卡片文本ID设置：将原来静态的html.P内容替换为带id的元素，这样回调函数可以通过ID定位并更新其内容
2. 回调扩展：回调的Output列表新增两个元素，分别对应成功/失败计数文本的children属性
3. 初始值修正：下拉菜单初始值设为有效站点，避免页面加载时因值不匹配导致的计数错误
4. 计数更新：在回调函数中计算成功/失败计数后，直接将数值作为返回值传递给对应的文本元素，实现动态更新

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