问题：
无法使用下拉列表selectrors更新dash应用程序中的图形
施自珍
您好，我正在开发一个dash应用程序，不知怎的，我无法更新不同div之间的图形。这就是应用程序的工作原理：
- 用户在文本输入框的前端给出一个url输入，然后单击按钮运行分析。
- 用户也可以在运行分析之前选择视图模式，视图模式取决于下拉选择器
- url用于显示视频帧和运行python函数。
- 处理的结果应该存储在dcc.store组件中。
- 然后调用存储的数据来更新图表。
下面是回调代码：
#Video Selection
@app.callback(Output("video-display", "url"),
[Input("submit_button", "n_clicks")],
[State('video_url', 'value')])
def select_footage(n_clicks, video_url):
if n_clicks is not None and n_clicks > 0:
url = video_url
return url
# Processing and Storing the results in dcc.store
@app.callback(Output("intermediate-value", "data"),
[Input("submit_button", "n_clicks")],
[State('video_url', 'value')])
def video_processing(n_clicks, value ):
global frame
if n_clicks is not None and n_clicks > 0:
frame = python_func(url)
return frame.to_json(orient='split')
# Callback to change the graph view mode div
@app.callback(Output("div-graph-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_graph_mode(value):
if value == "graphical":
return [
html.Div(
children=[
html.P(children="Retention Score of Detected Labels",
className='plot-title'),
dcc.Graph(
id="bar-score-graph",
style={'height': '55vh', 'width': '100%'}
),
html.P(children="Audience Retention Behavior",
className='plot-title'),
dcc.Graph(
id="line_chart_retention",
style={'height': '45vh', 'width': '100%'}
)
]
)
]
else:
return []
@app.callback(Output("div-table-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_table_mode(dropdown_value):
if dropdown_value == "table":
return [
html.Div(
children=[
html.P(children="Retention By Label",
className='plot-title'),
html.Div([
table.DataTable(
id="label_retention",
)],
style={'height': '45vh'}),
html.P(children="Retention by Time Stamp",
className='plot-title'),
html.Div([
table.DataTable(
id="timestamp_retention",
style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'})],
style={'height': '40vh'}
)
]
)
]
else:
return []
# Updating Graphs
@app.callback(Output("label_retention", "figure"),
[Input("dropdown-graph-view-mode", "value")])
def update_table_bar(value):
global frame
if frame is not None:
print(frame)
print("table")
print(value)
@app.callback(Output("bar-score-graph", "figure"),
[Input("dropdown-graph-view-mode", "value")])
def update_score_bar(value):
global frame
if frame is not None:
print(frame)
print("graph")
print(value)
现在发生的是，如果我尝试在两种图形视图模式之间切换，应用程序不会反映图形，需要再次单击按钮才能获得结果。因此，基本上我相信当我切换下拉列表时，数据不会在dcc.store组件中丢失。
如何使应用程序的行为方式使我的python函数只在submit按钮上运行一次，然后我就能够在视图模式之间切换以查看图形。
提前多谢！！
另外，这只是一段代码，因为代码太长了，但是如果你想看完整的代码，请告诉我。
更新：我刚刚意识到，当我选择图表模式时，应用程序会打印表格模式的结果，当我选择表格模式时，应用程序会打印图表模式的结果。我无法理解为什么会发生这种情况。
共有1个答案
耿和韵
我终于能够解决我的问题，如下所示：
@app.callback(Output("div-table-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_table_mode(dropdown_value):
if dropdown_value == "tabular":
return [
html.Div(
children=[
html.P(children="Retention By Label",
className='plot-title', style={'margin': '0 0 1em 0'}),
html.Div([
table.DataTable(
id="label_retention",
columns=[{"name": i, "id": i} for i in label_retention.columns],
data=label_retention.to_dict("rows"),
style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'},
style_cell_conditional=[
{
'if': {'column_id': c},
'textAlign': 'left'
} for c in ['Labels']
],
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'
}
)],
style={'height': '40vh'}),
html.P(children="Retention by Time Stamp",
className='plot-title', style={'margin': '1em 0 1em 0'}),
html.Div([
table.DataTable(
id="timestamp_retention",
columns=[{"name": i, "id": i} for i in timeline_retention.columns],
data=timeline_retention.to_dict("rows"),
style_table={'maxHeight': '40vh', 'width': '100%', 'overflowY': 'scroll'},
style_cell={'textAlign': 'left', 'minWidth': '20px', 'width': '20px', 'maxWidth': '50px',
'whiteSpace': 'normal'},
css=[{
'selector': '.dash-cell div.dash-cell-value',
'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'
}],
style_data_conditional=[
{
'if': {'row_index': 'odd'},
'backgroundColor': 'rgb(248, 248, 248)'
}
],
style_header={
'backgroundColor': 'rgb(230, 230, 230)',
'fontWeight': 'bold'
}
)],
style={'height': '40vh'}
)
],
style={'backgroundColor': '#F2F2F2'}
)
]
else:
return []
@app.callback(Output("div-graph-mode", "children"),
[Input("dropdown-graph-view-mode", "value")])
def update_graph_mode(value):
if value == "graphical":
return [
html.Div(
children=[
html.P(children="Retention Score of Detected Labels",
className='plot-title', style={'margin': '0 0 1em 0', 'width': '100%'}),
dcc.Graph(
id="bar-score-graph",
figure=go.Figure({
'data': [{'hoverinfo': 'x+text',
'name': 'Detection Scores',
#'text': y_text,
'type': 'bar',
'x': label_retention["Description"],
'marker': {'color': colors},
'y': label_retention["sum"].tolist()}],
'layout': {'showlegend': False,
'autosize': False,
'paper_bgcolor': 'rgb(249,249,249)',
'plot_bgcolor': 'rgb(249,249,249)',
'xaxis': {'automargin': True, 'tickangle': -45},
'yaxis': {'automargin': True, 'range': [minval, maxval], 'title': {'text': 'Score'}}}
}
),
style={'height': '55vh', 'width': '100%'}
),
html.P(children="Audience Retention Behavior",
className='plot-title', style={'margin': '0 0 1em 0', 'width': '100%'}),
dcc.Graph(
id="line_chart_retention",
figure=go.Figure({
'data': [go.Scatter(x=label_retention['Start'], y=label_retention['sum'], mode='lines', name='Audience Retention',
line=dict(color='firebrick', width=4))],
'layout': {
'yaxis': {'title': {'text': 'Audience Retention'}, 'automargin': True},
'xaxis': {'title': {'text': 'Time Segment'}, 'automargin': True},
'paper_bgcolor': 'rgb(249,249,249)',
'plot_bgcolor': 'rgb(249,249,249)',
}
}),
style={'height': '45vh', 'width': '100%'}
)
],
style={'backgroundColor': '#F2F2F2', 'width': '100%'}
)
]
else:
return []
类似资料：
-
本文列出了 Dreamweaver 中提供的所有应用程序内更新。有关什么是应用程序内更新以及如何启用自动或手动更新模式的信息，请参阅安装应用程序内更新。 应用程序内更新 Bootstrap 更新 - 2016 年 8 月 Bootstrap 更新 - 2015 年 12 月 Bootstrap 更新 - 2016 年 8 月 此更新可将 Dreamweaver 中的 Bootstrap 版本升级到
-
我只是尝试在google play核心库API提供的应用程序更新服务中实现。 在发布了较新版本的应用程序后进行了内部测试。我在play store中获得了更新版本的应用程序，如图1所示。但是，我无法看到“更新”按钮在同一页上，正如屏幕上的-2。另外，应用程序是禁用的，以更新根据代码的实现。请帮我处理这件事。谢谢。屏幕肖像1屏幕肖像2 ` }`
-
我们有一个应用程序，利用在应用程序计费。我们看到的问题如下： 当使用较高版本代码的构建被上传到Play Developer控制台时，In App Billing将停止在设备上的应用程序（使用较低版本代码）上工作，表示“应用程序未配置为计费”。 这很好，在测试的时候，但问题是--当应用程序在Google Play商店中时，会有什么行为？当您替换应用程序（以执行更新）时，处于野生状态（具有较低版本代码
-
我想从下拉列表中选择值。 目前我可以点击下拉列表，但无法从下拉列表中选择值。下面是我用来从下拉列表中选择值的代码。 我在框架中工作，你能告诉我相应的代码吗。请检查我正在使用的以下代码。 超文本标记语言
-
我昨天在play store上更新了我的应用程序，但我不能将我的应用程序更新到新版本。如果我去玩商店使用我的手机，我没有得到更新按钮。 会不会是这个导致了这些问题？我现在不想支持xlargescreens，这就是为什么我删除了它。
-
问题内容： 我有一个现有的Flask应用程序，并且想找到通往另一个应用程序的路线。更具体地说，第二个应用程序是Plotly Dash应用程序。如何在现有的Flask应用程序中运行Dash应用程序？ 我还尝试将路由添加到Dash实例，因为它是Flask应用程序，但出现错误： 问题答案： 从文档： 基本的Flask应用程序可从访问app.server。 你还可以将自己的Flask应用实例传递到Dash