Python、Dash：如何将 KPI Card 组件添加到仪表板

Question

我是 Dash 的新手，我正在寻找一个组件 (dash_core_component) 来创建 KPI 卡，我可以在其中显示单个值和简短描述。

举个例子：

Answer 1

它不是 dash_core_component，但您可以使用 Cards from the bootstrap dash components 创建如下内容：

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    [
        dbc.CardHeader("Marketing"),
        dbc.CardBody(
            [
                html.H4("201 new Leads", className="card-title"),
                html.P("Delivered this week compared...", className="card-text"),
            ]
        ),
    ],
    style={"width": "30rem"},
)

添加到您的 css 文件：

.card-text {
  color: #999999;
  margin-bottom: 7.5px;
  display: block;
}

.card-title {
  font-weight: bold;
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 7.5px;
}

Answer 2

此外，plotly 有仪表类型指标图表：https://plotly.com/python/indicator/

Python、Dash：如何将 KPI Card 组件添加到仪表板

Python, Dash: how to add a KPI Card component to a dashboard

python

data-visualization

plotly

plotly-dash