Python Dash - 允许用户 select 他们想在图表上看到哪些变量

Question

有没有办法让用户选择他们想要在图表上显示的内容？

与此类似的内容：

因此图表最初加载 1，然后如果用户单击 2，图表将变为按国家/地区划分的可出租面积而不是按国家/地区划分的年租金。

有人可以指出我如何使用 dash 实现这一目标的正确方向吗？我尝试使用一个按钮，但它不起作用，因为在回调中我已经有一个提交按钮来生成这个图表。

下面的简化代码：

dbc.Button('Submit', id='submit_button')

dbc.Col([
         dbc.Card([
             html.Button(className='button btn btn-sm',
                         id='pie1_change',
                         n_clicks=0,
                         children='Rentable Area'),

             dcc.Graph(id='pie_chart1', style={'margin-top': '20px'}, figure=blank_fig())], style={'margin-top': '30px'}),
], width=4)


# Pie Chart - Country with Annual Rent
@callback(
    Output('pie_chart1', 'figure'),
    [Input('submit_button', 'n_clicks')],
    [State('country_checklist', 'value'),
     State('radios_currency', 'value')]
)
def update_pie_chart_1(n_clicks, selected_country, selected_currency):
    if not selected_country and n_clicks is None:
        return dash.no_update
    elif selected_currency == '$':
        df_pie = df[(df['Country'].isin(selected_country))]
        fig = px.pie(df_pie, values='Annual Rent', names='Country', color_discrete_sequence=px.colors.sequential.Aggrnyl)
        return fig

    else:
        df_pie = df[(df['Country'].isin(selected_country))]
        fig = px.pie(df_pie, values='Annual Rent_EUR', names='Country', color_discrete_sequence=px.colors.sequential.Aggrnyl)
        return fig

现在生成此输出：

当用户单击“可出租区域”时，我如何将回调上下文添加到现在图表将更新（更改在下面突出显示）：

Answer 1

单选按钮是处理此类情况的良好用户控件，因为值必须是选项之一。回调中的 if/else 逻辑可以重构以使其优雅，但我以这种方式保留它，以便尽可能明确地说明如何使用 RadioItems 'value' 属性.

dcc.RadioItems(
    id='chart-dataset-selector',
    options=[
        {'label': 'Annual Rent Per Country', 'value': 'annual-rent'},
        {'label': 'Rentable Area Per Country', 'value': 'rentable-area'}
    ],
    value='annual-rent',
)

# Pie Chart - Country with Annual Rent
@callback(
    Output('pie_chart1', 'figure'),
    Input('submit_button', 'n_clicks'),
    Input('chart-dataset-selector', 'value'),
    State('country_checklist', 'value'),
    State('radios_currency', 'value')
)
def update_pie_chart_1(n_clicks, selected_country, selected_currency, selected_dataset):
    if not selected_country and n_clicks is None:
        return dash.no_update
    elif selected_currency == '$':
        if selected_dataset == 'annual-rent':
            df_pie = df[(df['Country'].isin(selected_country))]
            fig = px.pie(df_pie, values='Annual Rent', names='Country', color_discrete_sequence=px.colors.sequential.Aggrnyl)
        else:
            assert selected_dataset == 'rentable-area'
            df_pie = your_code_here_to_get_data()
            fig = px.pie(df_pie, values='Rentable Area', names='Country', color_discrete_sequence=px.colors.sequential.Aggrnyl)
    else:
        if selected_dataset == 'annual-rent':
            df_pie = df[(df['Country'].isin(selected_country))]
            fig = px.pie(df_pie, values='Annual Rent_EUR', names='Country', color_discrete_sequence=px.colors.sequential.Aggrnyl)
        else:
            assert selected_dataset == 'rentable-area'
            df_pie = your_code_here_to_get_data()
            fig = px.pie(df_pie, values='Rentable Area_EUR', names='Country', color_discrete_sequence=px.colors.sequential.Aggrnyl)
    return fig

Python Dash - 允许用户 select 他们想在图表上看到哪些变量

Python Dash - Allowing user to select what variables they want to see on a graph

python

button

callback

plotly-dash