在 Dash 中连接下拉菜单和 RadioItem

Question

我是 Dash 的新手，我正在尝试连接 dcc.Dropdown 和 dcc.RadioItems 组件。 为此，我创建了这个非常简单的 Dash 应用程序示例，我希望允许用户根据之前的输入选择（RadioItems）来选择图表（下拉菜单）。 我的代码在功能方面运行良好，但我不确定在这种情况下这是否是使用回调函数的正确方法。 请在下面找到代码：

import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate

data = {'date': [10, 5, 7, 11], 'column1': [15, 4, 8, 5], 'column2': [1, 2, 3, 9], 'column3': [1.5, 2.5, 3.5, 0.5]}
df = pd.DataFrame(data)
app = dash.Dash(__name__)

show_columns = ['column1', 'column2', 'column3']

app.layout = html.Div(children=[
    html.H1(children='Columns visualisation'),
    html.Div([
        html.Div(
            dcc.RadioItems(
                id='radio_items',
                options=[{'label': i, 'value': i} for i in show_columns],
                value='column1',
                labelStyle={'display': 'inline-block'}
            ),
        ),
        dcc.Dropdown(
            id='dropdown',
            options=[
                {'label': 'Line Chart', 'value': 'v1'},
                {'label': 'Bar Chart', 'value': 'v2'}
            ],
            value='v1',
         ),

        html.Div(dcc.Graph(id='graph')),
    ]),
])


@app.callback(
    Output('graph', 'figure'),
    Input('radio_items', 'value'),
    Input('dropdown', 'value')
)
def update_output(item, value):
    if item == 'column1':
        try:
            if value is None:
                raise PreventUpdate
            elif value == 'v1':
                fig = px.line(df, x=df.date, y=df.column1)
                return fig
            elif value == 'v2':
                fig1 = px.bar(df, x=df.date, y=df.column1)
                return fig1
        except ValueError:
            return None
    if item == 'column2':
        try:
            if value is None:
                raise PreventUpdate
            elif value == 'v1':
                fig = px.line(df, x=df.date, y=df.column2)
                return fig
            elif value == 'v2':
                fig1 = px.bar(df, x=df.date, y=df.column2)
                return fig1
        except ValueError:
            return None
    else:
        try:
            if value is None:
                raise PreventUpdate
            elif value == 'v1':
                fig = px.line(df, x=df.date, y=df.column3)
                return fig
            elif value == 'v2':
                fig1 = px.bar(df, x=df.date, y=df.column3)
                return fig1
        except ValueError:
            return None


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

我想知道是否有更优雅的方式来设置我的update_output 函数？

真的是这样吗？

我将不胜感激。 提前致谢

Answer 1

我认为您的示例中的检查是不必要的。

您可以使用从回调中收到的值直接选择部分数据。

您可以创建一个以"v1"、"v2" 作为键的图表类型字典。字典中的值可以对应于用于给定键的绘图函数：

charts = {"v1": px.line, "v2": px.bar}

然后你可以把你的回调改成这样：

@app.callback(
    Output("graph", "figure"), Input("radio_items", "value"), Input("dropdown", "value")
)
def update_output(item, chart_type):
    if chart_type is None:
        raise PreventUpdate

    return charts[chart_type](df, x=df.date, y=df[item])

您实际上也不需要检查所选图表类型是否为None 的if 语句，因为您已经在layout 中设置了默认值，因此下拉值永远不会是None：

@app.callback(
    Output("graph", "figure"), Input("radio_items", "value"), Input("dropdown", "value")
)
def update_output(item, chart_type):
    return charts[chart_type](df, x=df.date, y=df[item])