python - plotly dash 将图像添加到 dcc.Tabs,根据用户输入进行更新
问题描述
我正在尝试为调查回复创建一个交互式仪表板,其中用户输入调查问题和主题的标题以及从回复中生成的 wordcloud 在每个选项卡中更新(我已经生成了主题和 wordcloud 作为 img) . 我试过了
这是我的布局代码,其中我为生成的主题/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,其标题随用户输入而更新。我真的很感谢这里的支持。
解决方案
您需要将返回对象包含在列表中,因为 div 的“children”属性需要一个列表。
if tab == tabname:
return [html.Div([
html.H3(topics[number])]), html.Img(path+ "topic_number.png")]
推荐阅读
- xamarin.android - 在滑动选项卡布局片段上添加按钮 android xamarin
- elasticsearch - 弹性搜索匹配短语查询 -> 输出不可预测
- ruby-on-rails - 尝试在 Rails 应用程序中显示数据时为零
- python - ImportError:无法从“django.utils.encoding”导入名称“python_2_unicode_compatible”
- android - Flutter AWS S3 - 存储桶策略问题。文件上传成功然后拒绝访问
- r - 计算重复测量设计的结果比例
- reactjs - 如何在 Namecheap 子域上部署 React App?
- python - 当条件要求输入为特殊字符时,如何在Python中编写IF函数?
- android - 搜索不检索数据
- jquery - 为什么子菜单在悬停的手风琴中消失