plotly dash 将图像添加到 dcc.Tabs，根据用户输入进行更新

Question

我正在尝试为调查回复创建一个交互式仪表板，其中用户输入调查问题和主题的标题以及从回复中生成的 wordcloud 在每个选项卡中都会更新（我已经将主题和 wordcloud 生成为一张图片）。我试过了

这是我的布局代码，其中我为生成的主题/wordcloud 提供了 7 个选项卡。

 dbc.Col([dcc.Tabs(id= "topic_tabs", value= "topic-1", children=[
                dcc.Tab(label= "Topic 1", value= "topic-1"),
                dcc.Tab(label= "Topic 2", value= "topic-2"),
                dcc.Tab(label= "Topic 3", value= "topic-3"),
                dcc.Tab(label= "Topic 4", value= "topic-4"),
                dcc.Tab(label= "Topic 5", value= "topic-5"),
                dcc.Tab(label= "Topic 6", value= "topic-6"),
                dcc.Tab(label= "Topic 7", value= "topic-7"),
                ]), html.Div(id= "topic_title"),
                     html.Div(id= "wordcloud")
                     ], width= {"size": 6, "order": 2}),
            ]),

这是我的回调代码

@app.callback(
[Output(component_id= "topic_title", component_property= "children")],
[Input(component_id='survey', component_property='value'),
 Input(component_id= "question", component_property= "value"),
 Input(component_id="topic_titles_memory", component_property= "data"),
 Input(component_id="topic_tabs", component_property="value")])

def word_cloud_tabs(survey, question, topics, tab):
if survey =="COVID":
    path= *mypath* + str(question)
    
else:
    path= *mypath* + str(question)
if tab =="topic-1": 
    return html.Div([
        html.H3(topics[0], style= {"background-image": path+ "topic_1.png"})]) 
elif tab =="topic-2":
    return html.Div([
        html.H3(topics[1]), html.Img(path+ "topic_2.png")])
elif tab =="topic-3":
    return html.Div([
        html.H3(topics[2])]) , html.Div([html.Img(path+ "topic_3.png")])
elif tab =="topic-4":
    return html.Div([
        html.H3(topics[3])]), html.Img(path+ "topic_4.png")
elif tab =="topic-5":
    return html.Div([
        html.H3(topics[4])]), #html.Img(path+ "topic_5.png")
elif tab=="topic-6":
    return html.Div([
        html.H3(topics[5])]), #html.Img(path+ "topic_6.png")
elif (tab== "topic-7") & (len(topics)==7):
    return html.Div([
        html.H3(topics[6])]), #html.Img(path+ "topic_7.png") 
else:
    return {"display": None}

上面我展示了我所做的不同试验，我已经开始以 topi-1 为例，返回 1 html.Div([html.H3(title, with the wordcloud as the background)]) 并得到一个错误

  The callback ..topic_title.children.. is a multi-output.
Expected the output type to be a list or tuple but got

以 topic-2 的第二次试验为例，我尝试返回 1 html.Div([with the html.H3(title), html.Img(wordcloud)]) 仍然得到与上面相同的错误

以 topic-3 的第三次尝试为例，我创建了两个单独的 html.Div() 一个用于标题，另一个用于 wordcloud 并得到相同的错误。

我最近尝试以topic-4为例，我返回了标题的html.Div(html.H3)，直接返回了html.Img()，得到了关于img的错误。不能用作标签。

我的目标是让用户能够滚动浏览多个 wordcloud，其标题会随着用户输入而更新。非常感谢这里的支持。

Answer 1

您需要将返回对象包含在一个列表中，因为 div 的“children”属性需要一个列表。

if tab == tabname:
    return [html.Div([
        html.H3(topics[number])]), html.Img(path+ "topic_number.png")]