如何修复我的 Plotly Dash 应用程序组织不当 [英] How to Fix My Plotly Dash App Not Organizing Properly
问题描述
我正在尝试将我的 Plotly Dash 仪表板组织成列的部分，但我不明白我在这里做错了什么.我已经将我的组件包含在一个 dbc.Row 内的单独 dbc.Cols 中，并指定了我希望它们占用的列的宽度，但一切都只是堆叠在一起.理想情况下，我会将卡片单独放在左侧的一栏中，然后我会在右侧的旁边放置问题.有人可以帮我诊断一下我正在做的事情导致我的所有组件堆叠吗?
#导入包导入破折号将 dash_core_components 导入为 dcc将 dash_bootstrap_components 导入为 dbc将 dash_html_components 导入为 html从 dash.dependencies 导入输入、输出、状态app = dash.Dash()#应用布局app.layout = html.Div([dbc.Row(儿童=[dbc.Col(id=card_col",width = 6),dbc.Col(id=表单"，宽度=6，孩子=[html.div([dbc.FormGroup(儿童=[dbc.Label(问题1"),dbc.col(dcc.Input(type="text", id="q1", placeholder="输入您的信息"),宽度=6)],行=真)]),html.Br(),html.div(儿童=[dbc.FormGroup(儿童=[dbc.Label(问题 2?"),dbc.col(dbc.Input(type=text",id=q2",placeholder=输入您的信息"),宽度=6)],行=真)]),html.Br(),html.div([dbc.FormGroup(儿童=[dbc.Label(是/否?"),dbc.col(dbc.RadioItems(id=q3",options=[{label": Yes", value": 1},{标签":否"，值":2}]),宽度=6)],行=真)]),html.Br(),html.div([html.Button(id='提交按钮',n_clicks=0,儿童='提交查询',style={'fontSize':24})])]) #第二列结束]), #行尾,dbc.Row(html.div([dcc.Graph(id='graph1')]))])@app.callback(输出('card_col'，'儿童')，Input('提交按钮','n_clicks'),状态('q1'，'值')，状态('q2'，'值')，状态('q3','值'))def update_cards(n_clicks,input1,input2,input3):card1 = dbc.Card([dbc.CardBody([html.H4(f"{input1}", className="card-title"),html.P(f"{input1} 已提交.")],style={'display': 'inline-block','宽度': '33.3%','文本对齐':'居中'，'背景色': 'rgba(37, 150, 190)','白颜色'，'边框':2px 纯白色"})])card2 = dbc.Card([dbc.CardBody([html.H4(f"{input2}", className="card-title"),html.P(f"{input2} 已提交.")],style={'display': 'inline-block','宽度': '33.3%','文本对齐':'居中'，'背景色': 'rgba(37, 150, 190)','白颜色'，'边框':2px 纯白色"})])card3 = dbc.Card([dbc.CardBody([html.H4(f"{input3}", className="card-title"),html.P(f{input3} 已提交.")],style={'display': 'inline-block','宽度': '33.3%','文本对齐':'居中'，'背景色': 'rgba(37, 150, 190)','白颜色'，'边框':2px 纯白色"})])返回(卡 1、卡 2、卡 3)如果 __name__ == __main__":app.run_server()您尚未包含引导程序样式:
<块引用>链接样式表dash-bootstrap-components 不包含 CSS.这是为了让您可以自由地使用您选择的任何 Bootstrap v4 样式表.然而，这意味着为了正确设置组件样式，您必须自己链接到样式表.
<块引用>
在 Python 中，每个 CDN 链接都在 dbc.themes 子模块中可用，并且可以在实例化应用程序对象时使用.
https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/
所以不是这样:
app = dash.Dash()这样做:
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])I'm trying to organize my Plotly Dash dashboard into sections of columns, but I can't understand what I'm doing wrong here. I've included my components in separate dbc.Cols within one dbc.Row and specified the width of the column I'd like for them to take up, but everything is just stacked. Ideally, I'd have the cards in a column all by themselves on the left, then I would have the questions next to them on the right. Can someone please help me diagnose what I'm doing that's causing all my components to stack?
#Import packages
import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output, State
app = dash.Dash()
#App Layout
app.layout = html.Div([
dbc.Row(children=[
dbc.Col(id="card_col",width = 6),
dbc.Col(id="form", width=6, children=[
html.Div([
dbc.FormGroup(children=[
dbc.Label("Question 1"),
dbc.Col(
dcc.Input(type="text", id="q1", placeholder="Enter your info"),
width=6
)
],row=True)
]),
html.Br(),
html.Div(children=[
dbc.FormGroup(children=[
dbc.Label("Question 2?"),
dbc.Col(
dbc.Input(type="text",id="q2",placeholder="Enter your info"),
width=6
)
],row=True)
]),
html.Br(),
html.Div([
dbc.FormGroup(children=[
dbc.Label("Yes/No?"),
dbc.Col(
dbc.RadioItems(id="q3",options=[{"label": "Yes", "value": 1},
{"label": "No", "value": 2}
]
),width=6
)
],row=True)
]),
html.Br(),
html.Div([
html.Button(id='submit-button',
n_clicks=0,
children='Submit Query',
style={'fontSize':24})
])
]) #End of second column
]), #End of row,
dbc.Row(
html.Div([
dcc.Graph(id='graph1')
])
)
])
@app.callback(
Output('card_col','children'),
Input('submit-button','n_clicks'),
State('q1','value'),
State('q2','value'),
State('q3','value'))
def update_cards(n_clicks,input1,input2,input3):
card1 = dbc.Card([
dbc.CardBody([
html.H4(f"{input1}", className="card-title"),
html.P(f"{input1} was submitted.")
],style={'display': 'inline-block',
'width': '33.3%',
'text-align': 'center',
'background-color': 'rgba(37, 150, 190)',
'color':'white',
'border': "2px solid white"})
])
card2 = dbc.Card([
dbc.CardBody([
html.H4(f"{input2}", className="card-title"),
html.P(f"{input2} was submitted.")
],style={'display': 'inline-block',
'width': '33.3%',
'text-align': 'center',
'background-color': 'rgba(37, 150, 190)',
'color':'white',
'border': "2px solid white"})
])
card3 = dbc.Card([
dbc.CardBody([
html.H4(f"{input3}", className="card-title"),
html.P(f"{input3} was submitted.")
],style={'display': 'inline-block',
'width': '33.3%',
'text-align': 'center',
'background-color': 'rgba(37, 150, 190)',
'color':'white',
'border': "2px solid white"})
])
return (card1, card2, card3)
if __name__ == "__main__":
app.run_server()
You haven't included the bootstrap styles:
Linking a stylesheet dash-bootstrap-components doesn't come with CSS included. This is to give you the freedom to use any Bootstrap v4 stylesheet of your choice. This means however that in order for the components to be styled properly, you must link to a stylesheet yourself.
In Python, each CDN link is available within the dbc.themes submodule and can be used when instantiating the app object.
https://dash-bootstrap-components.opensource.faculty.ai/docs/quickstart/
So instead of this:
app = dash.Dash()
do this:
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
这篇关于如何修复我的 Plotly Dash 应用程序组织不当的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
