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

Question

我正在尝试为调查回复创建一个交互式仪表板，用户在其中输入调查问题和主题标题，并在每个选项卡中更新根据回复生成的词云（我已经生成了主题和wordcloud 作为 img）。我试过了

这是我的布局代码，其中我生成的 topics/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 为例 returning 1 html.Div([html.H3(title , 以wordcloud为背景)]) 报错

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

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

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

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

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

Answer 1

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

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

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

plotly dash adding an image to dcc.Tabs that updates based on the user inputs

python

dashboard

plotly-dash

plotly-python