带有 Plotly 破折号的网格仪表板

Question

我正在尝试使用 Plotly 的 Dash 构建一个仪表板，该仪表板由一系列图块（文本）组成，如下图所示。

我正在尝试构建一个组件以重用它并构建下面的布局。每个框将包含一个标题、一个值和一个描述，如下所示。

有组件可用吗？有人可以帮我做任何基本的 idea/code 吗？

提前致谢！

Answer 1

我建议查看 Dash Bootstrap Components (dbc)。

您可以使用嵌套在 dbc.Row（行）组件中的 dbc.Col（列）组件来生成布局。您可以查看 here.

然后对于实际的 'cards'（我称之为），您可以使用 dbc.Card 组件。这是 link.

下面是一些复制您的布局的示例代码：

import dash_bootstrap_components as dbc
import dash_html_components as html

card = dbc.Card(
    dbc.CardBody(
        [
            html.H4("Title", id="card-title"),
            html.H2("100", id="card-value"),
            html.P("Description", id="card-description")
        ]
    )
)

layout = html.Div([
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card]), dbc.Col([card]), dbc.Col([card])
    ]),
    dbc.Row([
        dbc.Col([card]), dbc.Col([card])
    ])
])

最好的办法可能是有一个函数可以创建带有 ID、标题和描述参数的卡片，从而省去创建不同卡片的麻烦：

def create_card(card_id, title, description):
    return dbc.Card(
        dbc.CardBody(
            [
                html.H4(title, id=f"{card_id}-title"),
                html.H2("100", id=f"{card_id}-value"),
                html.P(description, id=f"{card_id}-description")
            ]
        )
    )

然后您可以随意将每个 card 替换为 create_card('id', 'Title', 'Description')。

另一个快速提示是 col 组件有一个参数 width。您可以为一行中的每一列指定不同的值以调整相对宽度。您可以在我上面链接的文档中阅读更多相关信息。

希望这对您有所帮助，

奥利

带有 Plotly 破折号的网格仪表板

Grid dashboard with Plotly dash

html

css

python

plotly

plotly-dash