如何修复我的 Plotly Dash 应用程序组织不正确

How to Fix My Plotly Dash App Not Organizing Properly(如何修复我的 Plotly Dash 应用程序组织不正确)

问题描述

我正在尝试将我的 Plotly Dash 仪表板组织成列的部分，但我不明白我在这里做错了什么.我已将我的组件包含在一个 dbc.Row 中的单独 dbc.Cols 中，并指定了我希望它们占用的列的宽度，但所有内容都只是堆叠起来.理想情况下，我会将卡片单独放在左侧的列中，然后将问题放在右侧.有人可以帮我诊断一下我在做什么导致我的所有组件都堆叠吗?

#导入包导入破折号将 dash_core_components 导入为 dcc将 dash_bootstrap_components 导入为 dbc将 dash_html_components 导入为 html从 dash.dependencies 导入输入、输出、状态应用程序 = dash.Dash()#应用布局app.layout = html.Div([dbc.Row(儿童=[dbc.Col(id="card_col",width = 6),dbc.Col(id="form", width=6, children=[html.div([dbc.FormGroup(儿童=[dbc.Label(问题 1"),dbc.Col(dcc.Input(type="text", id="q1", placeholder="Enter your info"),宽度=6)],行=真)]),html.Br(),html.Div(儿童=[dbc.FormGroup(儿童=[dbc.Label(问题 2?"),dbc.Col(dbc.Input(type="text",id="q2",placeholder="Enter your info"),宽度=6)],行=真)]),html.Br(),html.div([dbc.FormGroup(儿童=[dbc.Label(是/否?")，dbc.Col(dbc.RadioItems(id=q3",options=[{label":是",值":1},{标签":否"，值":2}]),宽度=6)],行=真)]),html.Br(),html.div([html.Button(id='提交按钮',n_clicks=0,children='提交查询',样式={'fontSize':24})])]) #第二列结束]), #行尾,dbc.Row(html.div([dcc.Graph(id='graph1')]))])@app.callback(输出('card_col'，'孩子')，输入('提交按钮'，'n_clicks')，状态('q1'，'值')，状态('q2'，'值')，状态('q3','值'))def update_cards(n_clicks,input1,input2,input3):卡1 = dbc.卡([dbc. CardBody([html.H4(f"{input1}", className="card-title"),html.P(f"{input1} 已提交.")],style={'display': 'inline-block','宽度': '33.3%','文本对齐':'中心'，'背景色': 'rgba(37, 150, 190)','白颜色'，边框":2px 纯白色"})])卡2 = dbc.卡([dbc. CardBody([html.H4(f"{input2}", className="card-title"),html.P(f"{input2} 已提交.")],style={'display': 'inline-block','宽度': '33.3%','文本对齐':'中心'，'背景色': 'rgba(37, 150, 190)','白颜色'，边框":2px 纯白色"})])卡3 = dbc.卡([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 应用程序组织不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！