如何在短划线/插图中命名下拉菜单 [英] How to name to the dropdown menu in Dash/Plotly
本文介绍了如何在短划线/插图中命名下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我对Dash还很陌生，我正在尝试弄清楚如何将名字放在我的下拉菜单和滑块上，并在它们之间留出一些空隙。我将这些名称&DataSet&Quot；、&Quot；Model Types&Quot；放在下拉列表的侧面，而不是顶部。这是我一直使用的代码：
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')),
有人能指出我哪里错了吗？
编辑：
我在第一个DropDown之前添加了以下代码，并在每个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')),
推荐答案
您定义
# 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列和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
])
这篇关于如何在短划线/插图中命名下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
