Pandas Dash - 我如何将两个不同的输入绑定到一个输出？

Question

我有一个代码可以显示两个图表，其中有两个选项可供选择。现在，我将第一个选择选项绑定到两个图形，并且随着它的更改，图形也会更改。但我需要的是让第二个选项也影响图表 - 但条件是目前只有一个选项应该显示在图表上 - 只能从第一个或第二个选择的选项。如果它不起作用，我将需要创建两个额外的图表并将它们 bing 添加到第二个选择选项，但这会很糟糕。

P.S。如果您告诉我如何在运行应用程序的下拉菜单中显示所选标签，我将更加感激..

import dash
from dash import dcc
from dash import html
from dash.dependencies import Output, Input
import plotly.express as px
import pandas as pd
import numpy as np
import dash_bootstrap_components as dbc

ds=pd.DataFrame(data=(np.random.randn(10,20)))
ds.iloc[:, 0]=np.arange(0,10)


app = dash.Dash(__name__,
                external_stylesheets=[dbc.themes.BOOTSTRAP],
                meta_tags=[
                        {'name': 'viewport', 'content': 'width=device-width, initial-scale=1.0'}
                    ]
                )

app.layout = html.Div([
    dbc.Accordion(
        [
            dbc.AccordionItem(
                [
                    dcc.Dropdown(id='select',
                                 options=[{'label': 'Options 0-5', 'value': ds.columns[:6]},
                                          {'label': 'Options 6-10', 'value': ds.columns[6:11]}],
                                 searchable=True
                                 ),
                ],
                title="Individual Options",
            ),
            dbc.AccordionItem(
                [
                    dcc.Dropdown(id='select2',
                                 options=[{'label': 'Options 11-16', 'value': ds.columns[11:17]},
                                          {'label': 'Options 16+', 'value': ds.columns[16:]}],
                                 searchable=True
                                 ),
                ],
                title="Range of Options 2",
            ),
        ],
    ),
    html.Div([
        dcc.Graph(id='graph_a', figure={}),
        dcc.Graph(id='graph_b', figure={})
    ]),
])

@app.callback(Output('graph_a', 'figure'),
              Input('select', 'value'))
def update_graph_a(val):
    fig = px.line(ds,
                  x=0,
                  y=val)
    return fig


@app.callback(Output('graph_b', 'figure'),
              Input('select', 'value'))
def update_graph_b(val):
    fig = px.bar(ds,
                  x=0,
                  y=val)
    return fig


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

Answer 1

But what i need is to make second option to affect graphs too - but on the condition that at the moment only one option should be displayed on graph - only from first or from second selected one.

我假设最近 select 编辑一个选项的下拉列表应该决定使用哪个选项。

您可以将第二个 select 的 Input 添加到回调中，并使用 callback_context 确定哪个下拉值更改触发了回调

# ...
from dash.exceptions import PreventUpdate

@app.callback(
    Output('graph_a', 'figure'),
    Input('select', 'value'),
    Input('select2', 'value')
)
def update_graph_a(val1, val2):
    ctx = dash.callback_context

    select_values = {"select": val1, "select2": val2}
    select_id = ctx.triggered[0]['prop_id'].split('.')[0]

    if not select_id:
        raise PreventUpdate

    fig = px.line(ds, x=0, y=select_values[select_id])

    return fig

所以这里的想法是看哪个下拉菜单触发了回调。如果回调不是由两个下拉菜单触发的，我们会阻止使用 PreventUpdate 更新回调输出，因此图形保持为空。

您可以将相同的想法应用于另一个回调。或者您可以将回调合并为一个 return 折线图和条形图的回调。我会选择后者。

如果您想显示活动过滤器选项，您可以添加 Output 和 return select_id

Pandas Dash - 我如何将两个不同的输入绑定到一个输出？

Pandas Dash - How could i bind two different inputs to one output?

python

pandas

plotly-dash