如何在Dash App中使用下拉菜单刷新html地图？

问题描述

我是python Dash的新手。我正在尝试创建一个带有下拉菜单和地图的仪表板。通过在下拉菜单中选择一个值，该地图将使用新的html地图进行更新。 这是代码：

dropdown_list = [{'label': 'MSFT','value': 'MSFT'},{'label': 'IBM','value': 'IBM'}]


app.layout = html.Div(
    children=[
        html.Div(className='row',children=[
                    html.Div(className='three columns div-user-controls',children=[
                                 html.Div(
                                     children=[
                                         dcc.Dropdown(id='selector',options=dropdown_list,multi=False,value=dropdown_list[0]['value'],style={'backgroundColor': '#1E1E1E'}
                                                      ),],style={'color': '#1E1E1E'})
                                ]
                             ),html.Div(className='nine columns div-for-charts bg-grey',children=[
                                 html.Iframe(id='map',style={'border': 'none'},width='100%',height='750')
                            ])
        ])
])
                    
## Callback for timeseries price
@app.callback(Output('map','srcDoc'),[Input('selector','value')])
def update_map(dropdown_values):
    for vv in dropdown_values:
        if vv == 'MSFT':
            return open(html_file1,'r').read()
        elif vv == 'IBM':
            return open(html_file2,'r').read()
        else:
            return dash.no_update

但是，该地图未显示并且未更新。有人可以给我一些提示吗？预先谢谢你。

解决方法

我发现了问题。在下拉菜单中，自multi=False起，回调函数的输入中将只有一个值：dropdown_values。因此，无需遍历列表并匹配值。 下面是更正后的回调函数

@app.callback(Output('map','srcDoc'),[Input('selector','value')])
def update_map(dropdown_values):
        if dropdown_values == 'MSFT':
            return open(html_file1,'r').read()
        elif dropdown_values == 'IBM':
            return open(html_file2,'r').read()
        else:
            return dash.no_update