Plotly- dash :如何使用dash引导组件设计布局？
Plotly- dash :如何使用dash引导组件设计布局？
提问于 2020-08-26 15:47:26
我是Dash Plotly的新手，我想知道怎样才能设计出这样的布局。
据我所知，使用dash引导组件可以更容易地完成此操作。https://dash-bootstrap-components.opensource.faculty.ai作为第一步，我应该复制布局(灰色瓷砖)，作为第二步，我应该添加一些文本和一些图形。这只是基本的。
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-08-27 01:00:21
您应该查看此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')Stack Overflow用户
发布于 2021-04-22 20:03:55
是的，这可以用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
下面是一个有效的dash示例：
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')
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63592900
复制相关文章
相似问题
腾讯云开发者
