时间戳

首页 > 解决方案 > Plotly Dash 中带有过滤器（下拉菜单）的侧边栏

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

问题描述

我正在尝试使用一些过滤器对侧边栏进行编程，但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)

标签： pythonplotly-dash

解决方案

我发现清单更适合这个目的。如果您愿意使用它而不是下拉菜单来过滤数据框，那么下面的完整代码段将生成以下 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)

推荐阅读