python - 带有 Plotly dash 的网格仪表板
问题描述
我正在尝试使用 Plotly 中的 Dash 构建一个仪表板,该仪表板由一系列图块(文本)组成,如下图所示。
我正在尝试构建一个组件以重用它并构建下面的布局。每个框将包含一个标题、一个值和一个描述,如下所示。
有可用的组件吗?有人可以帮助我任何基本的想法/代码吗?
提前致谢!
解决方案
我建议查看Dash Bootstrap 组件(dbc)。
您可以使用dbc.Col
嵌套在dbc.Row
(行)组件中的(列)组件来生成布局。你可以在这里查看它们。
然后对于我称之为实际的“卡片”,您可以使用该dbc.Card
组件。这是链接。
这是一些复制您的布局的示例代码:
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
. 您可以给一行中的每一列一个不同的值来调整相对宽度。您可以在我上面链接的文档中阅读更多相关信息。
希望这可以帮助,
奥利
推荐阅读
- memory-management - /proc/[pid]/status:RssAnon 和 /proc/[pid]/smaps_rollup:Anonymous 之间存在差异的原因是什么?
- python - Python BeautifulSoup 输出异常的间距和字符
- python - Backtrader 错误:“DataFrame”对象没有属性“setenvironment”
- javascript - 数据在 redux-reducer 中被覆盖
- blob - 通过 Azure 数据工厂将数据从 Blob 复制到 SQL
- r - 如何在 Mac 上的 R 中设置 png 的分辨率
- python - 在python中提取标签之间的内容
- python-3.x - 删除数字,但如果它们是字符串的一部分,则不删除
- lua - 如何在 StackExchange.Redis 中正确加载 Lua 脚本?
- vue.js - Vue webpacks 的不同类型,如果需要在 vue 中构建主题,哪个适合选择?