如何命名 Dash/Plotly 中的下拉菜单
Posted
技术标签:
【中文标题】如何命名 Dash/Plotly 中的下拉菜单【英文标题】：How to name to the dropdown menu in 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 我在开始下拉菜单之前编辑了添加的代码。它现在肯定有效，但我不确定这是否是正确的方法。你能告诉我吗？
【参考方案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
])
【讨论】：
以上是关于如何命名 Dash/Plotly 中的下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章