График не обновляется, если выбрано раскрывающееся значение

Question

Я не могу понять, почему мой график не обновляется данными из значения, которое я выбрал. Может кто-нибудь, пожалуйста, попробуйте помочь.

Я пытался переписать это много раз, но, похоже, не могу разобраться с функцией, которую я должен написать после обратного вызова приложения и что я должен вернуть в этой функции.

app = dash.Dash()

app.layout = html.Div(children = [
    html.H1('Sports PA Dashboard'),

    dcc.Dropdown(
        id='sport_dropdown',
        options=[{'label': i, 'value': i} for i in df.Sport.unique()],
        value = df.Sport.unique()),

    dcc.Graph(id='age_vs_rank')

])

@app.callback(
    dash.dependencies.Output('age_vs_rank', 'figure'),
    [dash.dependencies.Input('sport_dropdown', 'value')])

def update_output(selected_sport):
    print(selected_sport)
    sport = df[df.Sport == selected_sport]
    rank = sport['Rank']
    age = sport['Age']
    dcc.Graph(id='age_vs_rank',
              figure={
                  'data' : [{'x':rank, 'y':age, 'type' : 'bar', 'name' : 'age_vs_rank'}],
                  'layout' : {
                      'title' : 'Age vs Rank'
                  }
              })
if __name__ == '__main__':
    app.run_server(debug=True)

Answer 1

Попробуйте изменить оператор возврата на функцию update_output. Так должно выглядеть,

@app.callback(
# If you stuck to what those values belongs to,
# you can specify them more in details:
# Output(component_id='your_plot_here', component_property='children'),
# instead of:
Output('your_plot_here', 'children'),
[Input('sport_dropdown', 'value')])

def update_output(selected_sport):
   sport = df[df.Sport == selected_sport]
   rank = sport['Rank']
   age = sport['Age']
   return figure = {'data': #stuff
                 'layout':#stuff
                }

Добавьте только значение dict, потому что это единственное значение, которое обновляется.

Извините, если форматирование выглядит странно, это мой первый ответ StackOverflow:)

Answer 2

Вы можете попробовать создать div и затем заполнить его тем, что вы хотите.

Код:

from flask import Flask
import dash
import dash_core_components as dcc
import dash_html_components as html
# if you import in a such way - you can call Input, Output directly
from dash.dependencies import Input, Output
# Create app
app = dash.Dash()
# Specify layout
app.layout = html.Div(children=[
    html.H1('Sports PA Dashboard'),
    dcc.Dropdown(
        id='sport_dropdown',
        options=[{'label': i, 'value': i} for i in df.Sport.unique()],
        value=df.Sport.unique()),
    # Create empty Div container, which you can fill with everything!
    html.Div(id='your-plot-here')
])


@app.callback(
    # If you stuck to what those values belongs to,
    # you can specify them more in details:
    # Output(component_id='your_plot_here', component_property='children'),
    # instead of:
    Output('your_plot_here', 'children'),
    [Input('sport_dropdown', 'value')])
def update_output(selected_sport):
    """This function create age_vs_rank graph."""
    # selected_sport == value property from sport_dropdown id
    print(selected_sport)
    sport = df[df.Sport == selected_sport]
    rank = sport['Rank']
    age = sport['Age']
    # return what you want in empty Div container with id 'your_plot_here'
    return dcc.Graph(id='age_vs_rank',
                     figure={'data': [
                                     {'x': rank, 'y': age,
                                      'type': 'bar', 'name': 'age_vs_rank'}
                                      ],
                             'layout': {
                                        'title': 'Age vs Rank'
                                        }
                             }
                     )


if __name__ == '__main__':
    app.run_server(debug=True)