Plotly Dash回调中切换for循环使用的列表变量实现动态数据展示

修改核心逻辑 #

你只需要修改回调函数update_list的返回逻辑即可，该函数不需要返回字典，直接返回符合要求的组件列表就行：

@app.callback(Output('fruit-list', 'children'),
        Input('change-the-list', 'value'))
def update_list(list_input):
    # 直接用选中的key拿到对应水果列表，遍历生成组件返回即可
    return [add_value(fruit) for fruit in fruit_list(list_input)]

完整可运行代码 #

import dash
from dash import dcc
from dash import html
from pathlib import Path
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

my_data = {'fruit_list1': ['apple', 'orange', 'peach'], 'fruit_list2': ['cherry', 'grape', 'strawberry']}
my_list = ['fruit_list1', 'fruit_list2']

def fruit_list(fruitlist):
        return(my_data[fruitlist])

def add_value(fruit):
        return html.P('Type of fruit : ' + fruit)

app.layout = html.Div(children=[
        html.P('Select fruit list : '),
        dcc.Dropdown(
                id='change-the-list',
                value='fruit_list1',
                clearable=False,
                options=[
                        {'label': value_input, 'value': value_input} for value_input in my_list]
                ),
        html.Div(
                id='fruit-list',
                children=[add_value(fruit) for fruit in fruit_list('fruit_list1')]
                )
        ])

@app.callback(Output('fruit-list', 'children'),
        Input('change-the-list', 'value'))
def update_list(list_input):
    return [add_value(fruit) for fruit in fruit_list(list_input)]

if __name__ == '__main__':
        app.run_server(debug=False, host='0.0.0.0', port=8051)

逻辑说明 #

• 回调会自动监听change-the-list下拉框的选中值，将选中的键名作为参数传入update_list
• 调用你预先定义的fruit_list工具函数，通过传入的键名从my_data字典中取出对应的水果列表
• 遍历水果列表调用add_value生成渲染用的P标签组件，返回后直接赋值给fruit-list的children属性完成页面更新

内容的提问来源于stack exchange，提问作者bison72