Как обновить html-карту с помощью выпадающего меню в приложении dash?

#python #html #plotly #plotly-dash #folium

#python #HTML #сюжет #plotly-dash #folium

Вопрос:

Я новичок в 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
  

Однако карта не отображается и не обновляется. Кто-нибудь может дать мне несколько советов по этому поводу? Заранее благодарю вас.

Ответ №1:

Я нашел проблему. В выпадающем меню, поскольку 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