我对 dash 还很陌生,我正在尝试弄清楚如何将名称放置在下拉菜单和 slider 上方,并在它们之间提供一些间隙。我在侧面而不是在下拉列表的顶部得到这些名称“数据集”、“模型类型”。这是我一直在使用的代码:
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')),
最佳答案
你定义
# 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="三列"
以消除列之间的间隙,并使用 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
])
关于python - 如何为 Dash/Plotly 中的下拉菜单命名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63802599/