Python 如何命名为短划线/绘图中的下拉菜单
我对dash还不太熟悉,我正试图弄清楚如何在下拉菜单和滑块上方放置名称,并在它们之间留出一些间隙。我将这些名称“数据集”、“模型类型”放在旁边,而不是放在下拉列表的顶部。这是我一直使用的代码: 有人能指出我错在哪里吗 编辑: 我在第一次下拉列表之前添加了以下代码,并在每个div之前删除了每个html.Label,这样就可以了。不确定这是否是正确的方法:Python 如何命名为短划线/绘图中的下拉菜单,python,plotly,dashboard,plotly-dash,Python,Plotly,Dashboard,Plotly Dash,我对dash还不太熟悉,我正试图弄清楚如何在下拉菜单和滑块上方放置名称,并在它们之间留出一些间隙。我将这些名称“数据集”、“模型类型”放在旁边,而不是放在下拉列表的顶部。这是我一直使用的代码: 有人能指出我错在哪里吗 编辑: 我在第一次下拉列表之前添加了以下代码,并在每个div之前删除了每个html.Label,这样就可以了。不确定这是否是正确的方法: html.Div(className='row', children=[ html.Div([ html.Labe
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%”
以更好地使用宽度
代码线程中使用的CSS文件全宽为12列(类似于其他CSS框架-即
Bootstrap
),因此,如果要创建3列,则应使用nameClass=“four columns”
,这意味着“12列中的4列”而4/12
给出了宽度1/3
——这样你就不必使用style=dict(width='33.33%)
编辑: 当然,您也可以将其组织成单独的行(如果有帮助的话)
您是否尝试只创建带有标签的行,然后创建带有下拉列表的行。或者将
标签
放置在div
之前的分隔div
中,并使用下拉列表
?是的,我这样做了,但是我有对齐问题。您是否使用CSS文件来进行此操作?最好显示我们可以运行和测试想法的最小工作代码。如果我使用Div(children=[Label,Dropdown])
那么我有Label
上面的Dropdown
但是aligment可以依赖于CSS
文件。请共享一个文件。@furas我编辑了代码,在我开始下拉之前添加了这个文件。到目前为止,它确实有效,但我不确定这是否是正确的方法。你能告诉我吗?
# 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
])
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)
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
])