如何在Python Dash的bootstrap卡片中展示完成百分比并修复CardText报错

报错原因是你当前使用的dash-bootstrap-components版本中，dbc.CardText仅支持接收Dash HTML组件（比如html.P、html.Span）作为入参，不能直接传入纯字符串变量。你可以按以下两种方式修改：

1. 给字符串套一层HTML组件，修改对应代码行即可：

dbc.CardText(html.P(completion_percentage))

2. 直接省略dbc.CardText，用原生HTML组件加类名实现相同效果：

html.P(completion_percentage, className="card-text")

修改后完整的卡片代码如下：

dbc.Card(
    dbc.CardBody(
        [
            html.H4("Completion Percentage", className="card-title"),
            html.P(completion_percentage, className="card-text")
        ]
    )
)

除了纯数值卡片展示，你还可以用以下更直观的方式展示完成率：

• Bootstrap进度条
  用dbc.Progress组件实现带样式的进度条，支持动态变色、条纹动画效果，代码示例：

  # 先把百分比转成数值类型
  completion_val = float(completion_percentage)
  # 进度条组件，根据完成率自动切换颜色
  dbc.Card(
      dbc.CardBody(
          [
              html.H4("项目完成进度", className="card-title"),
              dbc.Progress(
                  value=completion_val,
                  max=100,
                  striped=True,
                  animated=True,
                  color="success" if completion_val >= 70 else "warning" if completion_val >=30 else "danger",
                  label=f"{completion_percentage}%"
              )
          ]
      )
  )
  

• 环形进度条
  用Plotly空心饼图实现环形进度，视觉效果更简洁，代码示例：

  import plotly.graph_objects as go
  
  ring_fig = go.Figure(go.Pie(
      values=[float(completion_percentage), 100 - float(completion_percentage)],
      hole=0.7,
      marker_colors=["#27ae60", "#f1f2f6"],
      textinfo="none"
  ))
  ring_fig.add_annotation(
      text=f"{completion_percentage}%",
      x=0.5, y=0.5,
      font_size=26,
      showarrow=False
  )
  ring_fig.update_layout(
      showlegend=False,
      margin=dict(l=10, r=10, t=10, b=10),
      height=180
  )
  # 放在布局里直接用dcc.Graph渲染
  dcc.Graph(figure=ring_fig, config={"displayModeBar": False})
  

• 仪表盘图表
  用Plotly的Indicator组件实现仿真仪表盘效果，适合展示核心进度指标：

  import plotly.graph_objects as go
  
  gauge_fig = go.Figure(go.Indicator(
      mode = "gauge+number",
      value = float(completion_percentage),
      number = {"suffix": "%"},
      gauge = {
          "axis": {"range": [None, 100]},
          "bar": {"color": "#27ae60"},
          "steps": [
              {"range": [0, 30], "color": "#ffcccc"},
              {"range": [30, 70], "color": "#fff2cc"},
              {"range": [70, 100], "color": "#d5f5e3"}
          ]
      }
  ))
  gauge_fig.update_layout(height=220, margin=dict(l=10, r=10, t=10, b=10))
  

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