选择下拉值时图表不更新答案

【问题标题】：Graph not updating when dropdown value selected选择下拉值时图表不更新
【发布时间】：2019-08-21 12:27:10
【问题描述】：

我无法弄清楚为什么我的图表没有使用我选择的值中的数据进行更新。有人可以帮忙吗？

我已经尝试重写了很多次，但我似乎无法理解在应用回调之后我必须编写的函数以及我应该在这个函数中返回什么。

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)

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

您可以尝试创建 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)

【讨论】：

【解决方案2】：

尝试将 return 语句更改为您的 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
                }

只添加数字字典，因为那是唯一要更新的值。

对不起，如果格式看起来很奇怪，这是我的第一个 StackOverflow 答案:)

【讨论】：