如何解决Plotly-Dash:如何使用仪表板引导程序组件设计布局?
我是Dash Plotly的新手,我想弄清楚如何设计这样的布局。
据我了解,使用破折号引导程序组件可以更轻松地完成此操作。 https://dash-bootstrap-components.opensource.faculty.ai 第一步,我应该复制布局(灰色图块),第二步,我应该添加一些文本和一些图形。只是基本的。
谢谢。
解决方法
您应该查看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)',paper_bgcolor= 'rgba(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()
],align='center'),html.Br(),dbc.Row([
dbc.Col([
drawFigure()
],dbc.Col([
drawFigure()
],dbc.Col([
drawFigure()
],width=6),dbc.Row([
dbc.Col([
drawFigure()
],width=9),]),color = 'dark'
)
])
# Run app and display result inline in the notebook
app.run_server(mode='external')
,
是的 - 这可以通过 dash-bootstrap 来完成。由于屏幕布局分为 12 列 - 您必须根据您希望每个部分采用的列数来设置宽度。因此,例如,如果您需要 4 列,则每列应为 width a width=3。
您的布局看起来像这样 - 3 行,第一个有 4 列,第二个有 3 列,第三个有 2 列。构建布局后 - 您可以调整每行中列的宽度 - 因此它适合您需要的布局
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%"})],dbc.Col([dbc.Button("row 1 col 2",style={"width": "100%"})],dbc.Col([dbc.Button("row 1 col 3",dbc.Col([dbc.Button("row 1 col 4",dbc.Row([
dbc.Col([dbc.Button("row 2 col 1",dbc.Col([dbc.Button("row 2 col 2",dbc.Col([dbc.Button("row 2 col 3",dbc.Row([
dbc.Col([dbc.Button("row 3 col 1",dbc.Col([dbc.Button("row 3 col 2",])
])
if __name__ == "__main__":
app.run_server(debug=False,port=8050,host='0.0.0.0')
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。