绘图破折号：将标题放在每个下拉菜单上方

Question

由于某种原因，代码没有做应该做的事情，理想情况下，我想要标题，下拉词和情节并排，但目前相互堆叠。

这是Vestland提供的代码（再次感谢您！）的应用程序：

df_run_data = pd.DataFrame({'Hermes': {0: 'H11433-21', 1: 'H11433-21', 2: 'H11433-21', 3: 'H11433-21', 4: 'H11433-21', 5: 'H11433-21', 6: 'H11433-21', 7: 'H11433-22', 8: 'H11433-22', 9: 'H11433-22', 10: 'H11433-22', 11: 'H11433-22', 12: 'H11433-22', 13: 'H11433-22'}, 'Time': {0: 0.28, 1: 23.36, 2: 46.84, 3: 70.88, 4: 95.09, 5: 118.03, 6: 143.49, 7: 0.28, 8: 23.36, 9: 46.84, 10: 70.88, 11: 95.09, 12: 118.03, 13: 143.49}, 'Sample Type': {0: 'Broth', 1: 'Broth', 2: 'Broth', 3: 'Broth', 4: 'Broth', 5: 'Broth', 6: 'Broth', 7: 'Broth', 8: 'Broth', 9: 'Broth', 10: 'Broth', 11: 'Broth', 12: 'Broth', 13: 'Broth'}, 'Tank Weight Pre kg': {0: 0.249, 1: 0.254, 2: 0.318, 3: 0.389, 4: 
0.383, 5: 0.354, 6: 0.356, 7: 0.249, 8: 0.254, 9: 0.318, 10: 0.389, 11: 0.383, 12: 0.354, 13: 0.356}, 'Tank Weight Post kg': {0: 0.243, 1: 0.235, 2: 0.249, 3: 0.251, 4: 0.25, 5: 0.25, 6: 0.277, 7: 0.243, 8: 0.235, 9: 0.249, 10: 0.251, 11: 0.25, 12: 0.25, 13: 0.277}})
runs = df_run_data.Hermes.unique()
headers = list(df_run_data.columns.values)  

#how to use div https://stackoverflow.com/questions/62234909/layout-management-in-plotly-dash-app-how-to-position-html-div
app.layout = html.Div([

    dbc.Row([dbc.Col(html.H1('Nitrogen Balance', style = {'text-align': 'center'}))]),
    
    dbc.Row([dbc.Col(html.Label('Select Run',style={'font-weight': 'bold', "text-align": "start", 'font-size': 25}), width = 6, className = 'bg-primary ps-4'),
             dbc.Col(html.Label('Select Run',style={'font-weight': 'bold', "text-align": "start", 'font-size': 25}), width = 6, className = 'bg-primary ps-4')

            ], justify = 'start'),
    
    dbc.Row([dbc.Col([dcc.Dropdown(id='Hermes',
                    options=[{'label': i, 'value': i} for i in runs],   #df_run_data['Hermes']], #user will see this
                    value= None, #[i for i in df_run_data['Hermes']],  #default values to show runs
                    multi=True,
                    # style={'width':'40%','display': 'inline-block'}
                    )], width = 6, className = 'bg-secondary ps-4 pe-4'),
    
            dbc.Col([dcc.Dropdown(id='Columns',
                    options=[{'label': i, 'value': i} for i in headers],   #df_run_data['Hermes']], #user will see this
                    value= None, #[i for i in df_run_data['Hermes']],  #default values to show runs
                    multi=True,
                    # style={'width':'40%','display': 'inline-block'}
                    )], width = 6, className = 'bg-secondary ps-4 pe-4'),
            
            ], justify = 'start'
           ),
    html.Div(id ='output_container', children=[]),
    #html.Br(), #break here we want the space between divider and graph
    dbc.Row([dbc.Col([dcc.Graph(id='balance',figure={},
                    # style={'width': '80vh', 'height': '50vh'}
                    )], width = 6),
             dbc.Col([dcc.Graph(id='balance1',figure={},
                    # style={'width': '80vh', 'height': '50vh'}
                    
                    )], width = 6)])
 
])

Answer 1

简短答案：

为了更好地控制仪表板组件的位置，您应该考虑使用一个模式：

app.layout = hmtl.Div([dbc.Row([dbc.Col()])])

或者在您的情况下，更类似于此类似于此：

app.layout = hmtl.Div([dbc.Row([<header>])
                       dbc.Row([dbc.Col([<label>]),
                                dbc.Col([<label>])]),
                       dbc.Row([dbc.Col([<dropdown>]),
                                dbc.Col([<dropdown>])]),
                       dbc.Row([dbc.Col([<graph>]),
                                dbc.Col([<graph>])])])

第一个摘要中第一个应用程序产生此应用程序的完整详细信息：

详细信息：

此贡献不会直接回答有关您使用的特定组件行为的问题，但希望这将是解决基本问题的解决方案设计绘图仪表板应用时，一起播放效果很好。也许甚至为您提供一个平台，您可以在该平台上构建未来的情节破折号应用程序。

通常认为使用容器构建DASH应用程序的良好做法，dbc.container或html.div，它容纳许多行dbc.row（）依次保留许多列dbc.col（），它终于从一个或多个资源中握住您的情节仪表板组件：

from dash import Dash, html, dcc
import dash_bootstrap_components as dbc

此方法使您可以定位任何组件恰好您想要的地方。通过使用样式或className进行微调，您可以制作具有不同功能的不同组件，默认情况下对齐并表现良好。

例如，这样的：

应用程序/代码输出1

从这里开始，如果您想知道每个组件在哪里开始，结束和对齐彼此，则可以使用它们来装饰它们，例如代码> className ='bg-primary'并获取：

应用程序/代码输出2

代码spippet 1

from jupyter_dash import JupyterDash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px

app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

surfacing = pd.DataFrame({'Barcode':[1,2,3],
                         'Machine':[3,2,1]})

coating = pd.DataFrame({'Barcode':[1,2,3],
                         'Machine':[3,2,1]})

runs = ['A', 'B']
headers = ['A', 'B']

app.layout = html.Div([
    dbc.Row([dbc.Col(html.H1('Nitrogen Balance', style = {'text-align': 'center'}))]),
    
    dbc.Row([dbc.Col(html.Label('Select Run',style={'font-weight': 'bold', "text-align": "start", 'font-size': 25}), width = 6, className = 'bg-primary ps-4'),
             dbc.Col(html.Label('Select Run',style={'font-weight': 'bold', "text-align": "start", 'font-size': 25}), width = 6, className = 'bg-primary ps-4')

            ], justify = 'start'),
    
    dbc.Row([dbc.Col([dcc.Dropdown(id='Hermes',
                            options=[{'label': i, 'value': i} for i in runs],   #df_run_data['Hermes']], #user will see this
                            value= None, #[i for i in df_run_data['Hermes']],  #default values to show runs
                            multi=True,
                            # style={'width':'40%','display': 'inline-block'}
                            )], width = 6, className = 'bg-secondary ps-4 pe-4'),
            
            dbc.Col([dcc.Dropdown(id='Columns',
                            options=[{'label': i, 'value': i} for i in headers],   #df_run_data['Hermes']], #user will see this
                            value= None, #[i for i in df_run_data['Hermes']],  #default values to show runs
                            multi=True,
                            # style={'width':'40%','display': 'inline-block'}
                            )], width = 6, className = 'bg-secondary ps-4 pe-4'),
            
            ], justify = 'start'
           ),
    dbc.Row([dbc.Col([dcc.Graph(id='balance',figure={},
                                # style={'width': '80vh', 'height': '50vh'}
                               )], width = 6),
             dbc.Col([dcc.Graph(id='balance1',figure={},
                                # style={'width': '80vh', 'height': '50vh'}
                                
                               )], width = 6)])
 
])


app.run_server(debug=True)

代码sippet 2

from jupyter_dash import JupyterDash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
import pandas as pd
import plotly.express as px

app = JupyterDash(external_stylesheets=[dbc.themes.BOOTSTRAP])

surfacing = pd.DataFrame({'Barcode':[1,2,3],
                         'Machine':[3,2,1]})

coating = pd.DataFrame({'Barcode':[1,2,3],
                         'Machine':[3,2,1]})

runs = ['A', 'B']
headers = ['A', 'B']

app.layout = html.Div([
    dbc.Row([dbc.Col(html.H1('Nitrogen Balance', style = {'text-align': 'center'}))]),
    
    dbc.Row([dbc.Col(html.Label('Select Run',style={'font-weight': 'bold', "text-align": "start", 'font-size': 25}), width = 6, className = 'ps-4'),
             dbc.Col(html.Label('Select Run',style={'font-weight': 'bold', "text-align": "start", 'font-size': 25}), width = 6, className = 'ps-4')

            ], justify = 'start'),
    
    dbc.Row([dbc.Col([dcc.Dropdown(id='Hermes',
                            options=[{'label': i, 'value': i} for i in runs],   #df_run_data['Hermes']], #user will see this
                            value= None, #[i for i in df_run_data['Hermes']],  #default values to show runs
                            multi=True,
                            # style={'width':'40%','display': 'inline-block'}
                            )], width = 6, className = 'ps-4 pe-4'),
            
            dbc.Col([dcc.Dropdown(id='Columns',
                            options=[{'label': i, 'value': i} for i in headers],   #df_run_data['Hermes']], #user will see this
                            value= None, #[i for i in df_run_data['Hermes']],  #default values to show runs
                            multi=True,
                            # style={'width':'40%','display': 'inline-block'}
                            )], width = 6, className = 'ps-4 pe-4'),
            
            ], justify = 'start'
           ),
    dbc.Row([dbc.Col([dcc.Graph(id='balance',figure={},
                                # style={'width': '80vh', 'height': '50vh'}
                               )], width = 6),
             dbc.Col([dcc.Graph(id='balance1',figure={},
                                # style={'width': '80vh', 'height': '50vh'}
                                
                               )], width = 6)])
 
])


app.run_server(debug=True)