Блог

Итак, я пытаюсь создать простое веб-приложение с помощью dash plotly. У меня есть пара графиков на моей панели мониторинга, которые мне нужно изменить с помощью того же выпадающего списка. Один график представляет собой линейную диаграмму, которая показывает, как данные изменяются за 5-летний период, а другой — анимированную гистограмму, которая показывает движение выбранной страны за определенный год.

Данные приведены в надлежащую форму:

И так далее для 150 стран и периода с 2015-2020

Вот мой код:

 @app.callback(
    Output("page-content", "children"),
    [Input("url", "pathname")]
)
def render_page_content(pathname):
    if pathname == "/":
        return [
            html.P("This is the content of the home page!"),
            #This is the code for the plots
            dcc.Graph(id='scattergraph', figure=fig),
            
            html.Div([
                html.Div([
                    dcc.Graph(id='linechart'),
                ],className='six columns'),

                html.Div([
                    dcc.Graph(id='barchart'),
                ],className='six columns'),

            ],className='row'),
            
            html.Div([
                dcc.Dropdown(id='dropdown_id', options=name_options,multi=True)],style={'width':'40%'})
        ]
    
    elif pathname == "/page-1":
        return html.P("This is the content of page 1. Yay!")
    elif pathname == "/page-2":
        return html.P("Oh cool, this is page 2!")
    # If the user tries to reach a different page, return a 404 message
    return dbc.Jumbotron(
        [
            html.H1("404: Not found", className="text-danger"),
            html.Hr(),
            html.P(f"The pathname {pathname} was not recognised..."),
        ]
    )
 

А ниже приведена функция обновления выходных данных, а также скриншот результата

 @app.callback(
    [Output('piechart', 'figure'),
     Output('barchart', 'figure')],
    [Input('dropdown_id', 'value')]
)
#This updates the charts on the bottom of the home page
def update_data(chosen_country):
#     if len(chosen_country)==0:
#         df_filterd = dff[dff['Country name'].isin(['Netherlands','Iran','Spain','Italy'])]
#     else:
#         print(chosen_country)
#         df_filterd = dff[dff.index.isin(chosen_country)]
    dff=df.copy()
    df_filterd = dff[dff['Country name']== chosen_country]


    bar_chart=px.bar(data_frame=df_filterd, x="Country name", y="Score", color="Country name",animation_frame="year")
    list_chosen_countries=df_filterd['Country name'].tolist()
    df_line = dfcon[dfcon['Country name'].isin(list_chosen_countries)]

    line_chart = px.line(
            data_frame=df_line,
            x='year',
            y='Score',
            color='Country name',
            labels={'Country name':'Countries', 'year':'year'},
            )
    line_chart.update_layout(uirevision='foo')

    return (bar_chart,line_chart)
 

Некоторые вопросы, которые я не вижу в вашем коде:

1. Где определен фрейм данных dfcon?
2. Где определена переменная name_options? Назначили ли вы метки и значения для выпадающего меню? Вы могли бы сделать что-то вроде:

    dcc.Dropdown(id='dropdown_id', 
                options={'label': name, 'value': name} for name in name_options, 
                 multi=True) 
    

Тогда значение выпадающего списка будет передано в обратный вызов! Будьте осторожны с тем, чтобы ваш multi был True, если пользователю разрешено выбирать более одной страны, тогда у него могут возникнуть проблемы при фильтрации информации, поэтому вам понадобится новый цикл for .