回调内部的回调以更新图形周期

Question

我是Dash的新手，正在玩其中一个模板。问题是我正在尝试动态更新已经通过回叫动态更新的单个选项卡。想法是在Div中有两个图表，并根据下拉列表（每月或每个季度的销售图表）仅显示其中一个。

import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
import numpy as np
import pandas as pd
import plotly.graph_objs as go
from dash.dependencies import Input, Output

app = dash.Dash(external_stylesheets=[dbc.themes.PULSE])

app.config['suppress_callback_exceptions'] = True

app.layout = dbc.Container(
    [
        dcc.Store(id="store"),
        html.H1("Sales Financial Summary"),
        html.Hr(),
        dbc.Button(
            "Refresh graphs",
            color="primary",
            block=True,
            id="button",
            className="mb-3",
        ),
        dbc.Tabs(
            [
                dbc.Tab(label="Revenue", tab_id="re"),
            ],
            id="tabs",
            active_tab="re",
        ),
        html.Div(id="tab-content", className="p-4"),
    ]
)


@app.callback(
    Output("tab-content", "children"),
    [Input("tabs", "active_tab"), Input("store", "data")],
)
def render_tab_content(active_tab, data):
    if active_tab and data is not None:

        if active_tab == "re":
            return html.Div(
                [
                    dcc.Dropdown(id="dd",
                    options=[
                        {'label': 'Monthly', 'value': 'MTD'},
                        {'label': 'Quarterly', 'value': 'QTD'},
                    ],value='MTD', style={"width": "30%", "color": "primary"}, clearable=False
                    ),
                html.Div(id="graphs"),
                ])


            @app.callback(Output('graphs'), [Input('dd', 'value')])
            def showgraph(value):
                if value == "MTD":
                    return dbc.Row([
                                dbc.Col(dcc.Graph(figure=data["revm"]), width=9),
                                dbc.Col(dcc.Graph(figure=data["revt"]), width=3),
                                    ],no_gutters=True
                            )
                else:
                    return dbc.Row([
                                dbc.Col(dcc.Graph(figure=data["revq"]), width=9),
                                dbc.Col(dcc.Graph(figure=data["revt"]), width=3),
                                    ],no_gutters=True
                            )

    return "No tab selected"



@app.callback(Output("store", "data"), [Input("button", "n_clicks")])
def generate_graphs(n):
    if not n:
        # generate empty graphs when app loads
        return {k: go.Figure(data=[]) for k in ["revm", "revt", "revq"]}


    # generate graphs data
    # Actual data
    are = [21142, 22411, 30468, 20581, 16109, 20536, 28129, 13113, 24286, 19237, 21004]
    aret = [sum(are[:])]

    #Budget data
    bre = [36920, 20082, 21323, 16874, 24552, 20252, 20465, 22437, 21901, 20362, 17365]
    bret = [sum(bre[:])]
  
    
    periods = ["Nov", "Dec", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep"]
    Quarters = ["Q1", "Q2", "Q3", "Q4"]


    revm = go.Figure(data=[go.Bar(name='BGT', x=periods, y=bre, marker_color='#00B0AD', orientation='v'),
                         go.Bar(name='ACT', x=periods, y=are, marker_color='#593196', orientation='v')
                         ])
    revt = go.Figure(data=[go.Bar(name='BGT', x=['BGT'], y=bret, marker_color='#00B0AD', orientation='v'),
                         go.Bar(name='ACT', x=['ACT'], y=aret, marker_color='#593196', orientation='v')
                         ])
    revq = go.Figure(data=[go.Bar(name='BGT', x=Quarters, y=[sum(bre[0:1+1]),sum(bre[2:4+1]),sum(bre[5:7+1]),sum(bre[8:10+1])], marker_color='#00B0AD', orientation='v'),
                         go.Bar(name='ACT', x=Quarters, y=[sum(are[0:1+1]),sum(are[2:4+1]),sum(are[5:7+1]),sum(are[8:10+1])], marker_color='#593196', orientation='v')
                         ])


    # save figures in a dictionary for sending to the dcc.Store
    return {"revm": revm, "revt": revt, "revq": revq}


if __name__ == "__main__":
    app.run_server(debug=False, port=5353, dev_tools_ui=False, dev_tools_props_check=False)