Plotly dash 根据用户选择创建列

Question

我正在开发一个 selection 菜单，用户可以在其中 select 他们想要 compare/see 的实验次数。根据这个数字，我想调整出现的列数，每个实验一个。在下图中可以看到带有一个实验的菜单示例。但是，如果用户 select 的两个实验将它们放在并排的列中，我希望这些下拉菜单能够重复。

下面是一个列和一个实验的例子：

我目前的代码如下：

# Load Data
df = px.data.tips()

external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"] 

# Build App
app = JupyterDash(__name__,  external_stylesheets=external_stylesheets)

app.layout = html.Div([
    # first row - selecting the number of experiments
     html.Div([
        html.I("Select the number of experiments you want to compare (min - 2 and max - 10):"),
        html.Br(),
        
        # input box for the number of experiments
        dcc.Input(id="num_exp" , type='number', min = 2, max = 10, placeholder="No of experiments"),
        html.Div(id="output")
        ], style = {'width': '100%'}
    ),
    
    # second row - where the experiments are organized in columns
    html.Div([
        html.Label([
            html.I("X axis "),
            dcc.Dropdown(
                id = 'dd_axis', 
                clearable = False,
                placeholder = 'Select property x-axis',
                options=[
                    {'label': i, 'value': i}
                    for i in properties
                ], 
                style={
                    'width': '100%'
                })
        ]),
        html.Label([
            html.I("Y Axis "),
            dcc.Dropdown(
                id = 'dd_yaxis',
                clearable = False,
                placeholder = 'Select property y-axis',
                options=[ ], 
                disabled = False)
        ])        
    ], style = {'display': 'inline-block', 'vertical-align': 'top', 'margin-left': '3vw', 'margin-top': '3vw', 'width': '50%'})
])

@app.callback(
 Output("output", "children"),
    # number of experiments input 
    Input("num_exp", "value"),
)

def update_output(test_type):
    in_testtype = test_type
    return u'{} experiments'.format(test_type)

def cb_render(*vals):
    return " | ".join((str(val) for val in vals if val))

你能帮我在旁边添加更多下拉菜单并根据用户将第二行分成几列吗selection？

谢谢！

Answer 1

您可以使用 dbc.Col 和 dbc.Row 来完成此操作。

在您的布局中，有一个 Div，其中有一个空的 dbc.Row，用于用列填充其 children 属性。

然后，在由输入框值触发的回调中，有一个循环returns你想要的列数，以及dbc.Col的相关代码和你'我想在里面展示。

这是您的原始代码的 worked-up 示例：

import dash
from dash import dcc, html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output


app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

properties = ["a", "b", "c"]

app.layout = html.Div([
    # first row - selecting the number of experiments
    html.Div([
        html.I(
            "Select the number of experiments you want to compare (min - 2 and max - 10):"),
        html.Br(),
        # input box for the number of experiments
        dcc.Input(id="num_exp", value=2, type='number', min=2,
                  max=10, placeholder="No of experiments"),
        html.Div([
            dbc.Row([], id="output")
        ])
    ], style={'width': '100%'}
    ),
])


@app.callback(
    Output("output", "children"),
    # number of experiments input
    Input("num_exp", "value"),
)
def update_output(test_type):
    columns_list = []
    letters = "xyzabcdefg"
    for i in range(test_type):
        columns_list.append(
            dbc.Col([
                html.Label([
                    html.I(f"{letters[i].upper()} axis "),
                    dcc.Dropdown(
                        id=f'{letters[i]}_axis',
                        clearable=False,
                        placeholder=f'Select property {letters[i]}-axis',
                        options=[
                            {'label': i, 'value': i}
                            for i in properties
                        ],
                        style={
                            'width': '100%'
                        })
                ])
            ])
        )
    return columns_list


if __name__ == "__main__":
    app.run_server(debug=True)

Plotly dash 根据用户选择创建列

Plotly dash creating columns based on user selection

html

python

plotly

plotly-dash

plotly-python