图 plot 未链接到年份和月份的 2 个下拉列表

Question

我想将图形 plot 集成到两个下拉列表中。 一个是几年，另一个是几个月。 从年份下拉列表中选择任何年份并从月份下拉列表中选择月份后，我希望绘制所选年份中月份的图表。 但我无法做到这一点。 我创建了当月加入的学生的图表。 如果你们中的任何人解决了我的疑问，将不胜感激。 点击打开图片

应显示所选年份所选月份的图表 plot，它显示所选月份的几天加入的学生人数。 点击打开图片

但结果是我得到了这个。 请解决问题。 web 页面的图表部分没有显示任何内容。 点击打开图片

我的代码-

dbc.Col([html.H4('Day Wise Joining In Interview Preparation'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
      html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
        dcc.Dropdown(
            id='dropdown_3',
            options=[
                {'label': '2022',  'value': '2022_Year'},
                {'label': '2023',  'value': '2023_Year'},
            ],
            
        style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
    
    
    html.Label(['Month'],style={'font-weight': 'bold',"margin-left": "38px","margin-top": "10px"}),
    dcc.Dropdown(
           id='dropdown_4',
           options=[
                {'label': 'January', 'value': 'plotd_2023_jan'},
                {'label': 'February', 'value': 'plotd_2022_feb'},
                {'label': 'March', 'value': 'plotd_2022_mar'},
                {'label': 'April', 'value': 'plotd_2022_apr'},
                {'label': 'May', 'value': 'plotd_2022_may'},
                {'label': 'June', 'value': 'plotd_2022_jun'},
                {'label': 'July', 'value': 'plotd_2022_jul'},
                {'label': 'August', 'value': 'plotd_2022_aug'},
                {'label': 'September', 'value': 'plotd_2022_sep'},
                {'label': 'October', 'value': 'plotd_2022_oct'},
                {'label': 'November', 'value': 'plotd_2022_nov'},
                {'label': 'December', 'value': 'plotd_2022_dec'},
           ],
           
        style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
                          
    (dcc.Graph(id='graph_2')), 
])         

@app.callback(
    Output('graph_2', 'figure'),
    [Input(component_id='dropdown_3', component_property='value'),
     Input(component_id='dropdown_4', component_property='value')]
)
def drop_chart2(year_value,month_value):
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_feb'):        
        plotd_2022_feb = px.bar(days_2022_feb, x="Date", y="Students", orientation='v')
        plotd_2022_feb.update_layout(bargap=0.2,height=722)
        return plotd_2022_feb
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_mar'):
        plotd_2022_mar = px.bar(days_2022_mar, x="Date", y="Students", orientation='v')
        plotd_2022_mar.update_layout(bargap=0.23,height=724)
        return plotd_2022_mar
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_apr'):
        plotd_2022_apr = px.bar(days_2022_apr, x="Date", y="Students", orientation='v')
        plotd_2022_apr.update_layout(bargap=0.23,height=724)
        return plotd_2022_apr
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_may'):
        plotd_2022_may = px.bar(days_2022_may, x="Date", y="Students", orientation='v')
        plotd_2022_may.update_layout(bargap=0.23,height=724)
        return plotd_2022_may
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_jun'):
        plotd_2022_jun = px.bar(days_2022_jun, x="Date", y="Students", orientation='v')
        plotd_2022_jun.update_layout(bargap=0.23,height=724)
        return plotd_2022_jun
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_jul'):
        plotd_2022_jul = px.bar(days_2022_jul, x="Date", y="Students", orientation='v')
        plotd_2022_jul.update_layout(bargap=0.23,height=724)
        return plotd_2022_jul    
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_aug'):
        plotd_2022_aug = px.bar(days_2022_aug, x="Date", y="Students", orientation='v')
        plotd_2022_aug.update_layout(bargap=0.23,height=724)
        return plotd_2022_aug  
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_sep'):
        plotd_2022_sep = px.bar(days_2022_sep, x="Date", y="Students", orientation='v')
        plotd_2022_sep.update_layout(bargap=0.23,height=724)
        return plotd_2022_sep
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_oct'):
        plotd_2022_oct = px.bar(days_2022_oct, x="Date", y="Students", orientation='v')
        plotd_2022_oct.update_layout(bargap=0.23,height=724)
        return plotd_2022_oct
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_nov'):
        plotd_2022_nov = px.bar(days_2022_nov, x="Date", y="Students", orientation='v')
        plotd_2022_nov.update_layout(bargap=0.23,height=724)
        return plotd_2022_nov
    if (year_value == '2022_Year' &  month_value == 'plotd_2022_dec'):
        plotd_2022_dec = px.bar(days_2022_dec, x="Date", y="Students", orientation='v')
        plotd_2022_dec.update_layout(bargap=0.23,height=724)
        return plotd_2022_dec
    if (year_value == '2023_Year' &  month_value == 'plotd_2023_jan'):
        plotd_2023_jan = px.bar(days_2023_jan, x="Date", y="Students", orientation='v')
        plotd_2023_jan.update_layout(bargap=0.23,height=724)
        return plotd_2023_jan

Answer 1

检查你的笔记本后，我认为你应该如下更改，而不是&你应该使用and我添加了PreventUpdate使图表在下拉列表中没有价值时不更新：

from dash.exceptions import PreventUpdate
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    dbc.Col([
        html.H1('Hackveda '),
        html.H2('Statistics'),

    ], style={'textAlign': 'center'}),

    

    html.Div([
      html.H4(children='Students Joined in Year',style={"margin-left": "26px", "margin-top": "20px"}),

    dcc.Graph(
        id='example-graph',
        figure=fig_1
    ),
    html.Div([
      html.H4(children='Number of Students in Course',style={"margin-left": "26px"}),
      dcc.Graph(id='graph2',figure=fig_2),
   ])
    ])
,



        dbc.Col([html.H4('Total Interns Monthly Breakdown'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
        html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
        dcc.Dropdown(
            id='dropdown',
            options=[
                {'label': '2017', 'value': 'fig_2017'},
                {'label': '2018', 'value': 'fig_2018'},
                {'label': '2019', 'value': 'fig_2019'},
                {'label': '2020', 'value': 'fig_2020'},
                {'label': '2021', 'value': 'fig_2021'},
                {'label': '2022', 'value': 'fig_2022'},
                {'label': '2023', 'value': 'fig_2023'},
                    ],
            value='fig_2022',
            style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
        
    (dcc.Graph(id='graph')),
    
         dbc.Col([html.H4('Students Enrolled In Interview Preparation'),
                  html.H5('Monthly Breakdown'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
        html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
        dcc.Dropdown(
            id='dropdown_1',
            options=[
                {'label': '2022', 'value': 'plot_2022'},
                {'label': '2023', 'value': 'plot_2023'},
        ],
        value='plot_2022',
        style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
    (dcc.Graph(id='graph_1')),
    
    
    dbc.Col([html.H4('Day Wise Joining In Interview Preparation'),], style={"margin-top": "60px", 'textAlign': 'center', "font-size": "70"}),
      html.Label(['Year'],style={'font-weight': 'bold',"margin-left": "38px"}),
        dcc.Dropdown(
            id='dropdown_3',
            options=[
                {'label': '2022',  'value': '2022_Year'},
                {'label': '2023',  'value': '2023_Year'},
            ],
            
        style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
    
    
    html.Label(['Month'],style={'font-weight': 'bold',"margin-left": "38px","margin-top": "10px"}),
    dcc.Dropdown(
           id='dropdown_4',
           options=[
                {'label': 'January', 'value': 'plotd_2023_jan'},
                {'label': 'February', 'value': 'plotd_2022_feb'},
                {'label': 'March', 'value': 'plotd_2022_mar'},
                {'label': 'April', 'value': 'plotd_2022_apr'},
                {'label': 'May', 'value': 'plotd_2022_may'},
                {'label': 'June', 'value': 'plotd_2022_jun'},
                {'label': 'July', 'value': 'plotd_2022_jul'},
                {'label': 'August', 'value': 'plotd_2022_aug'},
                {'label': 'September', 'value': 'plotd_2022_sep'},
                {'label': 'October', 'value': 'plotd_2022_oct'},
                {'label': 'November', 'value': 'plotd_2022_nov'},
                {'label': 'December', 'value': 'plotd_2022_dec'},
           ],
           
        style={"width": "60%", "verticalAlign": "middle", "margin-left": "20px", "margin-top": "10px"}),
                          
    (dcc.Graph(id='graph_2')), 
])         
                     

@app.callback(
    Output('graph', 'figure'),
    [Input(component_id='dropdown', component_property='value')]
)
def drop_chart(value):
    if value == 'fig_2017':        
        fig_2017 = px.bar(final_6, x="Students", y="months", orientation='h')
        return fig_2017
    if value == 'fig_2018':
        fig_2018 = px.bar(final_5, x="Students", y="months", orientation='h')
        return fig_2018
    if value == 'fig_2019':
        fig_2019 = px.bar(final_4, x="Students", y="months", orientation='h')
        return fig_2019
    if value == 'fig_2020':
        fig_2020 = px.bar(final_3, x="Students", y="months", orientation='h')
        return fig_2020
    if value == 'fig_2021':
        fig_2021 = px.bar(final_2, x="Students", y="months", orientation='h')
        return fig_2021
    if value == 'fig_2022':
        fig_2022 = px.bar(final_1, x="Students", y="months", orientation='h')
        return fig_2022
    if value == 'fig_2023':
        fig_2023 = px.bar(final_7, x="Students", y="months", orientation='h')
        return fig_2023
    
@app.callback(
    Output('graph_1', 'figure'),
    [Input(component_id='dropdown_1', component_property='value')]
)    
def drop_chart1(value_1):
    if value_1 == 'plot_2022':        
        plot_2022 = px.bar(intprep_2022, x="Students", y="months", orientation='h')
        return plot_2022
    if value_1 == 'plot_2023':
        plot_2023 = px.bar(intprep_2023, x="Students", y="months", orientation='h')
        return plot_2023
    
@app.callback(
    Output('graph_2', 'figure'),
    [Input(component_id='dropdown_3', component_property='value'),
     Input(component_id='dropdown_4', component_property='value')]
)
def drop_chart2(year_value,month_value):
    if (year_value == '2022_Year' and  month_value == 'plotd_2022_feb'):        
        plotd_2022_feb = px.bar(days_2022_feb, x="Date", y="Students", orientation='v')
        plotd_2022_feb.update_layout(bargap=0.2,height=722)
        return plotd_2022_feb
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_mar'):
        plotd_2022_mar = px.bar(days_2022_mar, x="Date", y="Students", orientation='v')
        plotd_2022_mar.update_layout(bargap=0.23,height=724)
        return plotd_2022_mar
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_apr'):
        plotd_2022_apr = px.bar(days_2022_apr, x="Date", y="Students", orientation='v')
        plotd_2022_apr.update_layout(bargap=0.23,height=724)
        return plotd_2022_apr
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_may'):
        plotd_2022_may = px.bar(days_2022_may, x="Date", y="Students", orientation='v')
        plotd_2022_may.update_layout(bargap=0.23,height=724)
        return plotd_2022_may
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_jun'):
        plotd_2022_jun = px.bar(days_2022_jun, x="Date", y="Students", orientation='v')
        plotd_2022_jun.update_layout(bargap=0.23,height=724)
        return plotd_2022_jun
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_jul'):
        plotd_2022_jul = px.bar(days_2022_jul, x="Date", y="Students", orientation='v')
        plotd_2022_jul.update_layout(bargap=0.23,height=724)
        return plotd_2022_jul    
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_aug'):
        plotd_2022_aug = px.bar(days_2022_aug, x="Date", y="Students", orientation='v')
        plotd_2022_aug.update_layout(bargap=0.23,height=724)
        return plotd_2022_aug  
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_sep'):
        plotd_2022_sep = px.bar(days_2022_sep, x="Date", y="Students", orientation='v')
        plotd_2022_sep.update_layout(bargap=0.23,height=724)
        return plotd_2022_sep
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_oct'):
        plotd_2022_oct = px.bar(days_2022_oct, x="Date", y="Students", orientation='v')
        plotd_2022_oct.update_layout(bargap=0.23,height=724)
        return plotd_2022_oct
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_nov'):
        plotd_2022_nov = px.bar(days_2022_nov, x="Date", y="Students", orientation='v')
        plotd_2022_nov.update_layout(bargap=0.23,height=724)
        return plotd_2022_nov
    elif (year_value == '2022_Year' and  month_value == 'plotd_2022_dec'):
        plotd_2022_dec = px.bar(days_2022_dec, x="Date", y="Students", orientation='v')
        plotd_2022_dec.update_layout(bargap=0.23,height=724)
        return plotd_2022_dec
    elif (year_value == '2023_Year' and  month_value == 'plotd_2023_jan'):
        plotd_2023_jan = px.bar(days_2023_jan, x="Date", y="Students", orientation='v')
        plotd_2023_jan.update_layout(bargap=0.23,height=724)
        return plotd_2023_jan
    else:       
        raise PreventUpdate
    
if __name__ == '__main__':
        app.run_server(port=1085)