带有交互式按钮和下拉菜单的Plotly-Dash应用程序

Question

我正在尝试构建一个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但是在添加下拉组件时也遇到了问题。

Answer 1

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')