如何在Plotly Dash使用Python实现下拉菜单?

Question

在这个应用程序中，我试图显示当下拉菜单中的值改变时发生变化的情节。这些值是伦敦的行政区。数据可以在这里找到。下面是基本图的代码。

import plotly.graph_objects as go
df = pd.read_excel('multi-year-station-entry-and-exit-figures.xls', sheet_name='2017 Entry & Exit', skiprows=6)
df = df.loc[df['Borough'] == 'Islington']
df['Sunday'] = df['Sunday'] + df['Sunday.1']
df['Saturday'] = df['Saturday'] + df['Saturday.1']
df = df[['Borough', 'Station', 'Saturday', 'Sunday']]
df.index = range(len(df))
print(df['Borough'])
fig = go.Figure(data=[
go.Bar(name='Saturday', x=df["Station"], y=df["Saturday"]),
go.Bar(name='Sunday', x=df["Station"], y=df["Sunday"])
])
fig.update_layout(title='Weekend entry and exit figures in 2017',
xaxis_tickfont_size=14,
yaxis=dict(
title='Entry and exit numbers',
titlefont_size=16,
tickfont_size=14,
)
, barmode='group', template='plotly_dark', bargap=0.3, bargroupgap=0.1)
fig.show()

我可以手动更改市镇名称以更改情节。然后我用下拉菜单创建了Dash应用程序。但是，当选择下拉选项时，我不知道如何更改情节。我使用条件语句创建了一个版本，其中我为每个行政区添加了一个if-elif语句。然而，我仍然无法改变情节本身。基本上，我需要将这段代码df = df.loc[df['Borough'] == 'Islington']合并到Dash应用程序中。Dash应用程序代码如下所示。

import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd
import os
import plotly.io as pio
import plotly.graph_objects as go
import dash_bootstrap_components as dbc
df = pd.read_excel('multi-year-station-entry-and-exit-figures.xls', sheet_name='2017 Entry & Exit', skiprows=6)
df['Sunday'] = df['Sunday'] + df['Sunday.1']
df['Saturday'] = df['Saturday'] + df['Saturday.1']
df = df[['Borough', 'Station', 'Saturday', 'Sunday']]
df.index = range(len(df))
df = df[:-3]
app = dash.Dash()
fig_names = ['Islington', 'Camden']
fig_dropdown = html.Div([
dcc.Dropdown(
id='fig_dropdown',
options=[{'label': x, 'value': x} for x in fig_names],
value=None
)])
fig_plot = html.Div(id='fig_plot')
app.layout = html.Div([fig_dropdown, fig_plot])

@app.callback(
dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
return name_to_figure(fig_name)

def name_to_figure(fig_name):
figure = go.Figure()
if fig_name == 'Islington':
figure = go.Figure(data=[
go.Bar(name='Saturday', x=df["Station"], y=df["Saturday"]),
go.Bar(name='Sunday', x=df["Station"], y=df["Sunday"])
])
elif fig_name == 'Camden':
figure = go.Figure(data=[
go.Bar(name='Saturday', x=df["Station"], y=df["Saturday"]),
go.Bar(name='Sunday', x=df["Station"], y=df["Sunday"])
])
return dcc.Graph(figure=figure)

app.run_server(debug=True, use_reloader=False)

Answer 1

您可以创建一个数据帧的副本，其中仅包含与下拉选择相对应的数据，然后使用此过滤后的数据帧生成图:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objects as go
app = dash.Dash()
# load the data
df = pd.read_excel('multi-year-station-entry-and-exit-figures.xls', sheet_name='2017 Entry & Exit', skiprows=6)
df['Sunday'] = df['Sunday'] + df['Sunday.1']
df['Saturday'] = df['Saturday'] + df['Saturday.1']
df = df[['Borough', 'Station', 'Saturday', 'Sunday']]
df.index = range(len(df))
df = df[:-3]
# extract the list of all boroughs
fig_names = df['Borough'].unique().tolist()
# generate the app layout
app.layout = html.Div([
# add a dropdown for selecting the borough
html.Div([
dcc.Dropdown(
id='fig_dropdown',
options=[{'label': x, 'value': x} for x in fig_names],
value=fig_names[0]  # use the first borough as the initial selection
)]),
# add a container for the figure
html.Div(id='fig_plot'),
])
# define a callback for updating the figure
# based on the dropdown selection
@app.callback(dash.dependencies.Output('fig_plot', 'children'),
[dash.dependencies.Input('fig_dropdown', 'value')])
def update_output(fig_name):
# extract the data for the selected borough
df_fig = df[df['Borough'] == fig_name]
# plot the data for the selected borough
figure = go.Figure(data=[
go.Bar(name='Saturday', x=df_fig['Station'], y=df_fig['Saturday']),
go.Bar(name='Sunday', x=df_fig['Station'], y=df_fig['Sunday'])
])
return dcc.Graph(figure=figure)
if __name__ == '__main__':
app.run_server(debug=True, host='0.0.0.0', port=1234)