无法使用下拉选择器更新破折号应用程序中的图形

Question

您好，我正在开发 dash 应用程序，但不知何故我无法更新不同 div 回调之间的图表。这是应用程序的工作原理：

用户在前端的文本输入框中输入 url，然后单击按钮进行运行分析。
用户也可以在运行分析之前 select 查看模式，查看模式取决于下拉菜单 select 或
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 函数运行在提交按钮上只执行一次，然后我就可以在视图模式之间切换以查看图。

提前致谢！！

P.S。这只是一小段代码，因为代码太长了，但如果您想查看完整代码，请告诉我。

更新：我刚刚意识到，当我 select 图形模式时，应用程序打印 Table 模式的结果，而当我 select 模式时，应用程序打印 table 模型，应用程序打印图形模式的结果。我无法弄清楚为什么会这样。

Answer 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 []

无法使用下拉选择器更新破折号应用程序中的图形

Unable to update graphs in dash app with the dropdown selectrors

python

callback

plotly-dash