在 Dash 中连接 Dropdown 和 RadioItems

Question

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

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

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

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

您可以创建一个以 "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])

在 Dash 中连接 Dropdown 和 RadioItems

Connecting Dropdown and RadioItems in Dash

python

callback

plotly-dash