So benennen Sie das Dropdown-Menü in Dash / Plotly

Question

Ich bin ziemlich neu im Dash und versuche herauszufinden, wie ich Namen über meinen Dropdown-Menüs und Schiebereglern platziere und eine Lücke zwischen ihnen schaffe. Ich geet diese Namen "Datensatz", "Modelltypen" auf der Seite anstatt oben in den Dropdown-Listen. Dies ist der Code, den ich verwendet habe:

    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')),

Kann jemand darauf hinweisen, wo ich falsch liege?

Bearbeiten:

Ich habe vor meinem ersten Dropdown den folgenden Code hinzugefügt und jedes HTML.Label vor jedem Div entfernt, und das funktioniert. Ich bin mir nicht sicher, ob dies der richtige Ansatz ist:

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')),

Answer 1

Sie definieren

# 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
])

Aber ich schlage vor

# 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
])

oder zumindest

# 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
])

---

Minimaler Arbeitscode.

Ich habe entfernt className="three columns", um Lücken zwischen Spalten zu entfernen, und ich habe früher width="33.33%"die Breite besser verwendet.

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-Datei, die in Code-Threads in voller Breite als 12 Spalten verwendet wird (ähnlich wie bei anderen CSS-Frameworks - dh Bootstrap). Wenn Sie also 3 Spalten mit Lücken erstellen möchten, sollten Sie diese verwenden, nameClass="four columns"was "vier von 12 Spalten" bedeutet und 4/12Breite angibt 1/3- und dann Sie muss nicht verwendenstyle=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)

---

BEARBEITEN:

Natürlich können Sie es auch in getrennten Zeilen organisieren (wenn es Ihnen hilft)

# 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
])