dash python中的多个依赖和非依赖下拉列表答案

【问题标题】：multiple dependent and non-dependent dropdowns in dash pythondash python中的多个依赖和非依赖下拉列表
【发布时间】：2021-07-01 11:17:52
【问题描述】：

对于如何使用破折号进行多个下拉菜单，我感到非常困惑。我想显示公司，然后根据公司显示产品并在下拉菜单上单独显示性别（总共3个下拉菜单），输出只是一个带有年龄和数字值的图表。

以下是数据示例：

Company    Product    Gender    Age    Price
---------------------------------------------
Company1   X          Female    25     100
Company1   Y          Male      54     120
Company2   W          Male      18     130
...

我现在拥有的代码适用于单个下拉菜单：

    app.layout = html.Div([

    html.H1("Web Application Dashboards with Dash", style={'text-align': 'center'}),

    dcc.Dropdown(id="slct_company",
                 options=[
                     {"label": "Company1", "value": "Company1"},
                     {"label": "Company2", "value": "Company2"},
                     {"label": "Company3", "value": "Company3"}
                     
                 ],

                 multi=False,
                 value= 'All',
                 style={'width': "40%"}
                 ),

    html.Div(id='output_container', children=[]),
    html.Br(),

    dcc.Graph(id='Coeff_Analysis', figure={}, style={'width': '150vh', 'height': '90vh'})

])

@app.callback(
    [Output(component_id='output_container', component_property='children'),
     Output(component_id='Coeff_Analysis', component_property='figure')],
    [Input(component_id='slct_company', component_property='value')]
)

def update_graph(option_slctd):
    #print(option_slctd)
    #print(type(option_slctd))

    container = "The company chosen by user was: {}".format(option_slctd)

    dff = df.copy()
    if option_slctd == 'All':
        dff = dff
    else:
        dff = dff[dff["Company"] == option_slctd]

    # Plotly Express

    fig = px.scatter(df, x=dff['Age'], y=dff['Price'], color=dff['Company'], marginal_y="violin",
           marginal_x="box", trendline="ols", template="simple_white")

    fig.update_layout(
         title_text="Coefficient per company/product/gender/age",
         title_xanchor="center",
         title_font=dict(size=24),
         title_x=0.5
     )

    return container, fig


# ------------------------------------------------------------------------------
if __name__ == '__main__':
    app.run_server(debug=True)

所以我的最终结果是默认所有公司的单个下拉列表，我想添加下拉列表以分隔每个公司的产品和性别，同时仍然具有“全部”选项。

我已经有一本包含公司密钥和产品的字典，但不知道如何实现。

我已经搜索过，但不明白我找到的其他解决方案。

请帮忙。

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

你必须创建 2 个回调函数 1 用于受影响的下拉菜单，另一个用于图表：

@app.callback(
Output('drop2', 'options'),
Output('drop2', 'value'),
[Input('drop1','value')])
def update_dropdown(selected_company):
dff = df[df['Product'] == selected_company]
company_options = [{'label':i,'value':i} for i in dff["Product"].unique()]
return company_options, city_options[0]['value']

@app.callback(
Output('graph', 'figure'),
[Input('drop2', 'value'),
 Input('drop1', 'value')])
 
def update_graph(product,company):

dff = df[df["Product"] == product]

然后创建你想要的图形。

【讨论】：