Plotly-Dash：如何使用 dash 引导组件设计布局？

Posted 2023-02-16

【中文标题】Plotly-Dash：如何使用 dash 引导组件设计布局？

【英文标题】：Plotly-Dash: How to design the layout using dash bootstrap components?

【发布时间】：2020-12-14 23:23:18

【问题描述】：

我是 Dash Plotly 的新手，我正在尝试弄清楚如何设计这样的布局。

Layout:

据我了解，使用 dash 引导组件可以更轻松地完成此操作。 https://dash-bootstrap-components.opensource.faculty.ai 作为第一步，我应该重现布局（灰色瓷砖），作为第二步，我应该添加一些文本和一些图表。只是基本的。

谢谢。

【问题讨论】：

如果提供的答案解决了您的问题，请考虑将其标记为已接受的答案，并让其他人知道您的问题实际上已得到解答。

【参考方案1】：

您应该查看此link 以了解有关 Dash Bootstrap 组件以及如何构建布局的更多信息。

我使用JupyterDash 做了一个示例，它与您想要的布局相匹配。

import plotly.express as px
from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import plotly.express as px

# Iris bar figure
def drawFigure():
    return  html.Div([
        dbc.Card(
            dbc.CardBody([
                dcc.Graph(
                    figure=px.bar(
                        df, x="sepal_width", y="sepal_length", color="species"
                    ).update_layout(
                        template='plotly_dark',
                        plot_bgcolor= 'rgba(0, 0, 0, 0)',
                        paper_bgcolor= 'rgba(0, 0, 0, 0)',
                    ),
                    config=
                        'displayModeBar': False
                    
                ) 
            ])
        ),  
    ])

# Text field
def drawText():
    return html.Div([
        dbc.Card(
            dbc.CardBody([
                html.Div([
                    html.H2("Text"),
                ], style='textAlign': 'center') 
            ])
        ),
    ])

# Data
df = px.data.iris()

# Build App
app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

app.layout = html.Div([
    dbc.Card(
        dbc.CardBody([
            dbc.Row([
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
                dbc.Col([
                    drawText()
                ], width=3),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure() 
                ], width=3),
                dbc.Col([
                    drawFigure()
                ], width=3),
                dbc.Col([
                    drawFigure() 
                ], width=6),
            ], align='center'), 
            html.Br(),
            dbc.Row([
                dbc.Col([
                    drawFigure()
                ], width=9),
                dbc.Col([
                    drawFigure()
                ], width=3),
            ], align='center'),      
        ]), color = 'dark'
    )
])

# Run app and display result inline in the notebook
app.run_server(mode='external')

【讨论】：

感谢您提供的线索和代码。从您的代码中，我看到一整页宽度的最大宽度是 12。高度怎么样，所有图形的最大高度仅适用于一整页，这意味着不需要向下滚动即可查看？

@Kristian Haga，你为什么使用dbc.Card 作为所有其他元素（行、卡片）的容器？

@AndreiKrivoshei 我记不太清了，我认为这只是一种通过在外卡上指定 color='dark' 来获得不同背景颜色的简单方法。您可能只需将外部 Card 替换为基本 Div 或其他容器。

这是一个漂亮且非常简单的转发示例。谢谢你。

【参考方案2】：

是的 - 这可以通过 dash-bootstrap 完成。由于屏幕布局分为 12 列 - 您必须根据您希望每个部分采用的列数来设置宽度。因此，例如，如果您需要 4 列，则每列的宽度应为 width=3。

您的布局看起来像这样 - 3 行，第一行有 4 列，第二行有 3 列，第三行有 2 列。构建布局后 - 您可以使用每行中列的宽度 - 这样它就会适合您需要的布局

dbc.Row([dbc.Col([content]),dbc.Col([content]),dbc.Col([content]),dbc.Col([content])]),
dbc.Row([dbc.Col([content]),dbc.Col([content]),dbc.Col([content])]),
dbc.Row([dbc.Col([content]),dbc.Col([content])])

可以看详细解释here

这是一个有效的破折号示例：

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
import dash_bootstrap_components as dbc


app = dash.Dash(external_stylesheets=[dbc.themes.CYBORG])

app.layout = \
dbc.Container\
([
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 1 col 1",style="width":"100%")],width=3),
    dbc.Col([dbc.Button("row 1 col 2", style="width": "100%")],width=3),
    dbc.Col([dbc.Button("row 1 col 3",style="width":"100%")],width=3),
    dbc.Col([dbc.Button("row 1 col 4",style="width":"100%")],width=3),
    ]),
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 2 col 1",style="width":"100%")],width=3),
    dbc.Col([dbc.Button("row 2 col 2", style="width": "100%")],width=3),
    dbc.Col([dbc.Button("row 2 col 3",style="width":"100%")],width=6),
    ]),
    html.Br(),
    dbc.Row([
    dbc.Col([dbc.Button("row 3 col 1",style="width":"100%")],width=9),
    dbc.Col([dbc.Button("row 3 col 2", style="width": "100%")],width=3),
    ])
])

if __name__ == "__main__":
    app.run_server(debug=False, port=8050, host='0.0.0.0')

【讨论】：

@Napier - 如果你问同样的问题，你会得到同样的答案