回调函数无响应 scatter/bar 图

Question

我是 Plotly Dash 的新手，我无法掌握将多个输入链接到两个 (scatter/bar) 图的 @callback 函数。

仪表板

示例数据

出于某种原因，在选择输入并单击“运行选择”按钮后，图表不会相应更新。有谁知道我做错了什么？正在阅读文档并浏览在线示例，但无法弄清楚这一点...我认为 @callback 函数或我在函数中定义数据的方式有问题。

提前致谢，非常感谢您的帮助！ :slight_smile:

import pandas as pd
import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State

import plotly.graph_objs as go
import plotly.express as px

# load the data
data = pd.read_excel('example_data.xlsx')
data.fillna(0, inplace=True)
data['Satellite'] = data['Satellite'].astype(int)

#initiate app and set theme
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# navigation bar
navbar = dbc.NavbarSimple(
    children=[
        dbc.NavItem(dbc.NavLink("Page 1", href="#")),
        dbc.DropdownMenu(
            children=[
                dbc.DropdownMenuItem("Page 2", href="#"),
                dbc.DropdownMenuItem("Page 3", href="#"),
            ],
            nav=True,
            in_navbar=True,
            label="More",
        ),
    ],
    brand="Sample Dash Application",
    brand_href="#",
    color="primary",
    dark=True,
)
    
# Construct a dictionary of dropdown values for the days
day_options = []
for day in data['AsofDate'].unique():
    # grab day_options and append to it
    day_options.append({'label':str(day),'value':day})
    
# Construct a dictionary of dropdown values for the portfolios
portfolio_options = []
for portfolio in data['Satellite'].unique():
    portfolio_options.append({'label':str(portfolio),'value':int(portfolio) or 0})
    
# Construct a dictionary of dropdown values for the region
region_options = []
for region in data['Region'].unique():
    region_options.append({'label':str(region),'value':region})
    

###############################################################################
# Filter pane
# Check dash core components at https://dash.plotly.com/dash-core-components
###############################################################################
controls = [
    html.Div(
        [
            'Select Day',
            dcc.Dropdown(
                id='day-dropdown',
                options=day_options,
                value=data['AsofDate'].min(),
                clearable=False
            ),
        ]
    ),
    
    html.Div(
        [
            'Select Portfolio',
            dcc.Dropdown(
                id='portfolio-dropdown',
                options=portfolio_options,
                value=data['Satellite'].min(),
                clearable=False
            ),
        ]
    ),

    html.Div(
        [
            'Select Region',
            dcc.Dropdown(
                id='region-dropdown',
                options=region_options,
                value=data['Region'].min(),
                clearable=False
            ),
        ]
    ),
    
    html.Br(),
    
    dbc.Button("Run selection", color="primary", id="button-submit")
    
]
        
###############################################################################
# Add components here, e.g. graphs
############################################################################### 
   
avp_graph = dcc.Graph(id="avp-graph", style={"height": "500px"})

bar_plot_graph = dcc.Graph(id='bar-plot-graph', style={"height": "500px"})

###############################################################################
# Container
# Check dash core components at https://dash.plotly.com/dash-core-components
###############################################################################    

container = dbc.Container(
    fluid=True,
    children=[
        html.Hr(),
        html.H3('Dashboard'),
        html.Hr(),
        # Bootstrap Layout examples:
        # https://getbootstrap.com/docs/4.0/examples/
        # Bootstrap grid system: https://getbootstrap.com/docs/4.0/layout/grid/
        
        # Under each column (2, 5, 5) you can add components.
        # The left column has a width of 2 and contains the controls only.
        # The middle column has a width of 5 and contains a table and a graph.
        # The right column has a width of 5 and contains a table and a graph.
        dbc.Row(
            [
                dbc.Col(
                    [
                        # See https://dash-bootstrap-components.opensource.faculty.ai/docs/components/card/
                        dbc.Card([
                            dbc.CardHeader("Filter Pane"),
                            dbc.CardBody(controls),
                        ]
                        ),
                    ],
                    sm=2
                ),
                dbc.Col(
                    [
                        html.H5('Column 1'),
                        avp_graph # middle column, graph 1
                    ],
                    sm=5
                ),
                dbc.Col(
                    [
                        html.H5('Column 2'),
                        bar_plot_graph # right column, graph 2
                    ],
                    sm=5
                )
            ]
        )
    ]

)

# Define Layout
app.layout = html.Div([
    navbar,
    container
])

@app.callback(
    [
        Output("avp-graph", "figure"),
        Output("bar-plot-graph", "figure")

    ],
    [Input("button-submit", "n_clicks")],
    [
     State("day-dropdown", "value"),
     State("portfolio-dropdown", "value"),
     State("region-dropdown", "value"),
     ],
)

def run_submit(n_clicks, day, portfolio, region):
   
    # Bar plot
    mask = data["AsofDate"] == day
    bar_plot_graph = px.bar(data[mask], x=data['Region'], y=data['Return'], title='Bar Plot') # barmode="group",
    
    # Scatter Plot
    avp_graph = px.scatter(
        x=data['line_x'],
        y=data['line_y'],
        labels={"x": "x", "y": "y"},
        title=f"Scatter Plot",
    )
    
    return [avp_graph, bar_plot_graph] # return the components in the order of Output Callbacks!!!

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

Answer 1

我不确定你希望你的情节如何改变，但我能看到的是：

变量 portfolio 和 region 由下拉菜单的状态定义，但它们未在您的回调函数中使用。
回调函数中的情节avp_graph不依赖于任何输入。因此，无论您 select 在下拉菜单中选择什么，它都保持不变是有道理的。
情节bar_plot_graph仅取决于变量day。

回调函数无响应 scatter/bar 图

Non-responsive scatter/bar plots to the Callback function

python

callback

plotly-dash

仪表板

示例数据