Plotly Dash 中带有过滤器（下拉菜单）的侧边栏

Question

我正在尝试使用一些过滤器对侧边栏进行编程，但此下拉列表的回调 update_output 不起作用（没有抛出错误，只是什么都不做）。

我认为是因为这个下拉菜单不在主布局中，因为我的布局是由侧边栏和内容组成的。我在此侧边栏中的下拉菜单将是过滤器，这些过滤器将应用于为dashboard 和dashboard2 布局提供图形的数据框。

我的问题是我应该如何或在哪里对这些回调进行编程，以便为我的侧边栏下拉菜单提供功能？

sidebar = html.Div(
    [
        html.H2("Sidebar", className="display-4"),
        html.Hr(),
        html.P(
            "Sidebar", className="lead"
        ),
        dbc.Nav(
            [
                dbc.NavLink("Home", href="/", active="exact"),
                dbc.NavLink("Page 1", href="/page-1", active="exact"),
                dbc.NavLink("Page 2", href="/page-2", active="exact"),
            ],
            vertical=True,
            pills=True,
        ),
        dcc.Dropdown(id='dropdown',value="City"),
        html.Br(),
        dcc.Dropdown(id='dropdown2',options=[])
        
    ],
    style=SIDEBAR_STYLE,
)

content = html.Div(id="page-content", children=[], style=CONTENT_STYLE)

app.layout = html.Div([
    dcc.Location(id="url"),
    sidebar,
    content
])


@app.callback(
    Output('dropdown2', 'options'),
    Input('dropdown', 'value')
)
def update_output(value):
    return df[df["cities"].isin(value)]



@app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname")]
)
def render_page_content(pathname):
    if pathname == "/":
        return dashboard.layout
    elif pathname == "/page-1":
        return dashboard.layout
    elif pathname == "/page-2":
        return dashboard2.layout

    # return a 404 message when user tries to reach a different page
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )


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

Answer 1

我发现checklists 更适合此目的。如果您愿意使用它而不是下拉菜单来过滤数据框，那么下面的完整 sn-p 将生成以下 Plotly Dash 应用程序。

完整代码：

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import pandas as pd
import plotly.graph_objs as go
import numpy as np
import plotly.express as px

app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

df = px.data.stocks()
df = df.set_index('date')

controls = dbc.Card(
    [
        dbc.FormGroup(
            [
                dbc.Label("Checklist"),
                dcc.Checklist(
                    id="column_select",                   
                    options=[{"label":col, "value": col} for col in df.columns],
                    value=[df.columns[0]],
                    labelStyle={'display': 'inline-block', 'width': '12em', 'line-height':'0.5em'}
                ),
            ], 
        ),


    ],
    body=True,
    style = {'font-size': 'large'}
)


app.layout = dbc.Container(
    [
        html.H1("Dropdowns and checklists"),
        html.Hr(),
        dbc.Row([
            dbc.Col([controls],xs = 4),
            dbc.Col([
                dbc.Row([
                    dbc.Col(dcc.Graph(id="graph"), style={'height': '420px'}),
                ])
            ]),
        ]),
    ],
    fluid=True,
)

@app.callback(
    Output("graph", "figure"),
    [Input("column_select", "value"),],
)
def make_graph(cols):

    fig = px.line(df, x = df.index, y = cols, template = 'plotly_dark')
    return fig

app.run_server(mode='external', port = 8982)