Dash 交互式图表不会从 Pandas 数据框更新

Question

我正在尝试创建一个从 Dash 上的多选下拉菜单更新的条形图，但是当我选择要绘制的区号时，没有任何变化。

我的数据框由大约 11 行 4 列组成：

  Zip Code  Area Name     percent no internet   Mean Income Past 12 Months
0   38126   South Forum   0.8308                26346
1   38106   South Memphis 0.8223                31403
2   38108   Hollywood     0.7356                31278

这里是回调的代码：

@app.callback(
    dash.dependencies.Output('graph1', 'figure'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_image_src(selector):
    data = []
    filtered_data = df[df['Zip Code'] == zip_code]
    for zip_code in selector:
        data.append(dict(
            x=filtered_data['Area Name'][0],
            y=filtered_data['percent no internet'][0],
            type='bar',
            name=zip_code))
    figure = {
        'data': data,
        'layout': {
            'title': 'Percent of homes lacking broadband internet',
            'xaxis' : dict(
                title=data[0],
                titlefont=dict(
                family='Courier New, monospace',
                size=20,
                color='#7f7f7f'
            )),
            'yaxis' : dict(
                title='% No Internet',
                titlefont=dict(
                family='Helvetica, monospace',
                size=20,
                color='#7f7f7f'
            ))
        }
    }
    return figure

Answer 1

IIUC，这里的代码似乎可以满足您的需求。我可以用您的原始代码解决的一点是，首先您不定义图形的类型，其次不是迭代选择器，您可以使用 isin 一次获取所有内容。希望对你有帮助

import dash
from dash.dependencies import Output,Input
import dash_core_components as dcc
import dash_html_components as html

# the few rows of your question
import pandas as pd
df = pd.DataFrame( {'Zip Code': {0: 38126, 1: 38106, 2: 38108},
                    'Area Name': {0: 'South Forum', 1: 'South Memphis', 2: 'Hollywood'},
                    'percent no internet': {0: 0.8308, 1: 0.8223, 2: 0.7356},
                    'Mean Income Past 12 Months': {0: 26346, 1: 31403, 2: 31278}})   
# main app
app = dash.Dash(__name__)
app.layout = html.Div(children=[
    dcc.Dropdown(
        id='demo-dropdown', 
        options=[
            {'label': 38126, 'value': 38126},
            {'label': 38106, 'value': 38106},
            {'label': 38108, 'value': 38108}
        ],
        value=[38126, 38106],
        multi=True
    ),
    dcc.Graph(id='graph1'),
])

@app.callback(
    dash.dependencies.Output('graph1', 'figure'),
    [dash.dependencies.Input('demo-dropdown', 'value')])
def update_image_src(selector):
    # instead of iterating, use isin to select all the zipcode from the dropdown
    filtered_data = df.loc[ df['Zip Code'].isin(selector), 
                            ['Area Name', 'percent no internet']]

    figure = {
        # in figure, see how the data is defined
        'data': [{'x': filtered_data['Area Name'], 
                  'y': filtered_data['percent no internet'], 
                  'type': 'bar'}
        ],
        'layout': {
            'title': 'Percent of homes lacking broadband internet',
            'xaxis' : dict(
                title='Area Name', #change this, I'm not sure what you wanted
                titlefont=dict(
                    family='Courier New, monospace',
                    size=20,
                    color='#7f7f7f'
                )
            ),
            'yaxis' : dict(
                title='% No Internet',
                titlefont=dict(
                    family='Helvetica, monospace',
                    size=20,
                    color='#7f7f7f'
                )
            )
        }
    }
    return figure


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

编辑：获取不同的颜色和图例，然后在字典中替换 figure 如下：

figure = {
        # in figure, see how is define the data
        'data': [{'x': [area_name], 
                  'y': [percent], 
                  'type': 'bar', 
                  'name': area_name}
                  for area_name, percent in filtered_data.to_numpy()
        ],
...