如何命名 Dash/Plotly 中的下拉菜单答案

【问题标题】：How to name to the dropdown menu in Dash/Plotly如何命名 Dash/Plotly 中的下拉菜单
【发布时间】：2020-12-27 08:27:43
【问题描述】：

我对 dash 很陌生，我正在尝试弄清楚如何将名称放在下拉菜单和滑块上方，并在它们之间提供一些间隙。我在旁边而不是在下拉列表的顶部看到这些名称“数据集”、“模型类型”。这是我一直在使用的代码：

    html.Div(className='row', children=[
        html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),

 
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-dataset',
            options=[
                {'label': 'Diabetes', 'value': 'diabetes'},
                {'label': 'Boston Housing', 'value': 'boston'},
                {'label': 'Sine Curve', 'value': 'sin'}

            ],
            value='diabetes',
            searchable=False,
            clearable=False,

        ), style=dict(width='33%')),

        html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-select-model',
            options=[
                {'label': 'Linear Regression', 'value': 'linear'},
                {'label': 'Lasso', 'value': 'lasso'},
                {'label': 'Ridge', 'value': 'ridge'},
                {'label': 'Polynomial', 'value': 'polynomial'},
                {'label': 'elastic-net', 'value': 'elastic-net'},

            ],
            value='linear',
            searchable=False,
            clearable=False
        ),style=dict(width='33%')),

        html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-custom-selection',
            options=[
                {'label': 'Add Training Data', 'value': 'training'},
                {'label': 'Add Test Data', 'value': 'test'},
                {'label': 'Remove Data point', 'value': 'remove'},
            ],
            value='training',
            clearable=False,
            searchable=False
        ),style=dict(width='33%')),
    ],style=dict(display='flex')),

谁能指出我哪里错了？

编辑：

我在我的第一个下拉菜单之前添加了以下代码，并在每个 div 之前删除了每个 html.Label，这很有效。不确定这是否是正确的方法：

html.Div(className='row', children=[
      html.Div([
        html.Label(['Select Dataset'], style={'font-weight': 'bold', "text-align": "right","offset":1}),
    ], style=dict(width='33%')),

        html.Div([
                    html.Label(['Select Model'], style={'font-weight': 'bold', "text-align": "center"}),
            ], style=dict(width='33%')),
        html.Div([
                    html.Label(['Add Custom Data'], style={'font-weight': 'bold',"text-align": "left"}),
            ], style=dict(width='33%')),
            ],style=dict(display='flex',justifyContent='center')),

【问题讨论】：

您是否尝试仅创建带有标签的行，然后创建带有下拉列表的行。或者将Label 放在div 之前的div 和Dropdown 之间？
是的，我这样做了，但后来我遇到了对齐问题
您是否为此使用 CSS 文件？更好地展示我们可以运行和测试想法的最小工作代码。如果我使用Div( children=[Label, Dropdown])，那么我在Dropdown 上方有Label，但对齐可以取决于CSS 文件。
请分享mcve。
@furas 我在开始下拉菜单之前编辑了添加的代码。它现在肯定有效，但我不确定这是否是正确的方法。你能告诉我吗？

标签： python plotly dashboard plotly-dash

【解决方案1】：

你定义

# row
Div([
   Label(),
   Div([Dropdown()], width='33%')  # column
   Label(),
   Div([Dropdown()], width='33%')  # column
   Label(),
   Div([Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
])

但我建议

# row
Div([
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
])

至少

# row
Div([
   Div([Label(),Dropdown()], width='33%')  # column
   Div([Label(),Dropdown()], width='33%')  # column
   Div([Label(),Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Label(),Slide()], width='33%')  # column
   Div([Label(),Slide()], width='33%')  # column
   Div([Label(),Slide()], width='33%')  # column
])

最少的工作代码。

我删除了className="three columns" 以消除列之间的间隙，我使用width="33.33%" 以更好地使用宽度。

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    
    html.Div(className='row', children=[
        
        html.Div(children=[
                html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-dataset',
                    options=[
                        {'label': 'Diabetes', 'value': 'diabetes'},
                        {'label': 'Boston Housing', 'value': 'boston'},
                        {'label': 'Sine Curve', 'value': 'sin'}

                    ],
                    value='diabetes',
                    searchable=False,
                    clearable=False,
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ], style=dict(width='33.33%')),

        
        html.Div(children=[
                html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-select-model',
                    options=[
                        {'label': 'Linear Regression', 'value': 'linear'},
                        {'label': 'Lasso', 'value': 'lasso'},
                        {'label': 'Ridge', 'value': 'ridge'},
                        {'label': 'Polynomial', 'value': 'polynomial'},
                        {'label': 'elastic-net', 'value': 'elastic-net'},

                    ],
                    value='linear',
                    searchable=False,
                    clearable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ],style=dict(width='33.33%')),

        html.Div(children=[
                html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-custom-selection',
                    options=[
                        {'label': 'Add Training Data', 'value': 'training'},
                        {'label': 'Add Test Data', 'value': 'test'},
                        {'label': 'Remove Data point', 'value': 'remove'},
                    ],
                    value='training',
                    clearable=False,
                    searchable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ],style=dict(width='33.33%')),
    ],style=dict(display='flex')),
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8080)

代码线程中使用的 CSS 文件全宽为 12 列（类似于其他 CSS 框架 - 即。Bootstrap）所以如果你想创建 3 列有间隙，那么你应该使用nameClass="four columns"，这意味着“12 中的四列”和4/12 给出宽度1/3 - 然后你不必使用style=dict(width='33.33%')

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    
    html.Div(className='row', children=[
        
        html.Div(className="four columns", children=[
                html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-dataset',
                    options=[
                        {'label': 'Diabetes', 'value': 'diabetes'},
                        {'label': 'Boston Housing', 'value': 'boston'},
                        {'label': 'Sine Curve', 'value': 'sin'}

                    ],
                    value='diabetes',
                    searchable=False,
                    clearable=False,
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),

        
        html.Div(className="four columns", children=[
                html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-select-model',
                    options=[
                        {'label': 'Linear Regression', 'value': 'linear'},
                        {'label': 'Lasso', 'value': 'lasso'},
                        {'label': 'Ridge', 'value': 'ridge'},
                        {'label': 'Polynomial', 'value': 'polynomial'},
                        {'label': 'elastic-net', 'value': 'elastic-net'},

                    ],
                    value='linear',
                    searchable=False,
                    clearable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),

        html.Div(className="four columns", children=[
                html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-custom-selection',
                    options=[
                        {'label': 'Add Training Data', 'value': 'training'},
                        {'label': 'Add Test Data', 'value': 'test'},
                        {'label': 'Remove Data point', 'value': 'remove'},
                    ],
                    value='training',
                    clearable=False,
                    searchable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),
    ],style=dict(display='flex')),
)

if __name__ == '__main__':
    app.run_server(debug=True, port=8080)

编辑：

当然你也可以把它分成几行（如果对你有帮助的话）

# row
Div([
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
])

# row
Div([
   Div([Dropdown()], width='33%')  # column
   Div([Dropdown()], width='33%')  # column
   Div([Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
])

# row
Div([
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
])

【讨论】：