我正在尝试构建一个Dash应用程序,该应用程序将支持纽约州27个地区中每个地区的下拉菜单以及交互式条形图。数据框如下所示:
我编写了以下代码,对此repo进行了修改:
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
# Read in the data
df = districts_change.drop(['TOTAL'], axis=1)
# Get a list of all the districts
districts = districts_change['DISTRICT'].unique()
# Create the app
app = dash.Dash()
# Populate the layout with HTML and graph components
app.layout = html.Div([
html.H2("New York Congressional Districts"),
html.Div(
[
dcc.Dropdown(
id="DISTRICT",
options=[{
'label': i,
'value': i
} for i in districts],
value='All Districts'),
],
style={'width': '25%',
'display': 'inline-block'}),
dcc.Graph(id='funnel-graph'),
])
# Add the callbacks to support the interactive componets
@app.callback(
dash.dependencies.Output('funnel-graph', 'figure'),
[dash.dependencies.Input('DISTRICT', 'value')])
def update_graph(Districts):
if Districts == "All Districts":
df_plot = df.copy()
else:
df_plot = df[df['DISTRICT'] == Districts]
pv = pd.pivot_table(
df_plot,
index=['DISTRICT'],
columns=["Year"],
values=df_plot[['DEM', 'REP', 'CON', 'WOR', 'IND',
'GRE', 'WEP', 'REF', 'OTH', 'BLANK']],
aggfunc=sum,
fill_value=0)
# trace1 = go.Bar(x=pv.index, y=pv[('Quantity', 'declined')], name='Declined')
trace1 = go.Bar(x=pv.index, y=districts_change[('DEM')], name='DEM')
trace2 = go.Bar(x=pv.index, y=districts_change[('REP')], name='REP')
trace3 = go.Bar(x=pv.index, y=districts_change[('CON')], name='CON')
trace4 = go.Bar(x=pv.index, y=districts_change[('WOR')], name='WOR')
trace5 = go.Bar(x=pv.index, y=districts_change[('IND')], name='IND')
trace6 = go.Bar(x=pv.index, y=districts_change[('GRE')], name='GRE')
trace7 = go.Bar(x=pv.index, y=districts_change[('WEP')], name='WEP')
trace8 = go.Bar(x=pv.index, y=districts_change[('REF')], name='REF')
trace9 = go.Bar(x=pv.index, y=districts_change[('OTH')], name='OTH')
trace10 = go.Bar(x=pv.index, y=districts_change[('BLANK')], name='BLANK')
return {
'data': [trace1, trace2, trace3, trace4, trace5,
trace6, trace7, trace8, trace9, trace10],
'layout':
go.Layout(
title='District {}'.format(Districts),
barmode='group')
}
if __name__ == '__main__':
app.server.run(port=8000, host='127.0.0.1')
该应用在本地运行并显示下拉菜单,但是,我无法获得x轴来显示年份(2015-2018),而不是地区本身。
我成功地使一个地区运行on my blog,但是也没有添加下拉组件。
答案 0 :(得分:0)
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.graph_objs as go
import pandas as pd
# Read in the data
df = districts_change.drop(['TOTAL'], axis=1)
# Get a list of all the districts
districts = districts_change['DISTRICT'].unique()
# Create the app
app = dash.Dash()
# Populate the layout with HTML and graph components
app.layout = html.Div([
html.H2("New York Congressional Districts"),
html.Div(
[
dcc.Dropdown(
id="DISTRICT",
options=[{
'label': i,
'value': i
} for i in districts],
value='All Districts'),
],
style={'width': '25%',
'display': 'inline-block'}),
dcc.Graph(id='funnel-graph'),
])
# Add the callbacks to support the interactive componets
@app.callback(
dash.dependencies.Output('funnel-graph', 'figure'),
[dash.dependencies.Input('DISTRICT', 'value')])
def update_graph(Districts):
if Districts == "All Districts":
df_plot = df.copy()
else:
df_plot = df[df['DISTRICT'] == Districts]
trace1 = go.Bar(x=df_plot ['Year'], y=df_plot [('DEM')], name='DEM')
trace2 = go.Bar(x=df_plot ['Year'], y=df_plot [('REP')], name='REP')
trace3 = go.Bar(x=df_plot ['Year'], y=df_plot [('CON')], name='CON')
trace4 = go.Bar(x=df_plot ['Year'], y=df_plot [('WOR')], name='WOR')
trace5 = go.Bar(x=df_plot ['Year'], y=df_plot [('IND')], name='IND')
trace6 = go.Bar(x=df_plot ['Year'], y=df_plot [('GRE')], name='GRE')
trace7 = go.Bar(x=df_plot ['Year'], y=df_plot [('WEP')], name='WEP')
trace8 = go.Bar(x=df_plot ['Year'], y=df_plot [('REF')], name='REF')
trace9 = go.Bar(x=df_plot ['Year'], y=df_plot [('OTH')], name='OTH')
trace10 = go.Bar(x=df_plot ['Year'], y=df_plot [('BLANK')], name='BLANK')
return {
'data': [trace1, trace2, trace3, trace4, trace5,
trace6, trace7, trace8, trace9, trace10],
'layout':
go.Layout(
title='District {}'.format(Districts),
barmode='group')
}
if __name__ == '__main__':
app.server.run(port=8000, host='127.0.0.1')