当我想根据设置显示任意数量的图表时，如何处理 Dash 图表仪表板中的 clickData？

Question

对于一家医院的项目，我一直在尝试创建一个仪表板，以便我可以以医疗保健专业人员可以理解的方式向他们显示我的数据。我对 Dash 和plotly 完全陌生，我一直使用 matplotlib 来满足我的可视化需求，并且我真的很难处理点击事件，特别是因为所有在线资源似乎都假设您正在使用预定义的绘图，而我正在访问更大的数据集，并且仅根据需要绘制相关图。

我特别挣扎，因为我的主回调函数处理 div 和子项，而且我似乎无法保存正在单击的图形的 ID。我需要专门处理正在单击的图表的点击。我将分享一些代码片段，希望能让您了解我想要实现的目标。

app = dash.Dash(__name__)

# App layout
app.layout = html.Div([
    dcc.Dropdown(
        id='patient-dropdown',
        options=[{'label': patient_id, 'value': patient_id} for patient_id in sorted_patient_ids],
        value=[sorted_patient_ids[0]],  # Default value
        multi=True  # Allows selecting multiple options
    ),

    dcc.Checklist(
        id='six-weeks-line-toggle',
        options=[{'label': '6-week line', 'value': 'SWL'}],
        value=[]
    ),
    dcc.Checklist(
        id='t-dates-toggle',
        options=[{'label': 'Show t0 to t4 dates', 'value': 'SHOW_T_DATES'}],
        value=[]
    ),
    dcc.Dropdown(
        id='question-dropdown',
        options=[{'label': question, 'value': question} for question in questions],
        # multi=True  # Allows selecting multiple options
    ),
    dcc.Checklist(
        id='volume-of-notes-toggle',
        options=[{'label': 'Show volume of notes', 'value': 'SHOW_VOLUME_OF_NOTES'}],
        value=[]
    ),
    html.Div(id='graphs-container'),
    html.Div(id='notes-display', style={'white-space': 'pre-line'}),
    dcc.Graph(id='patient-plot')
])
@app.callback(
    Output('graphs-container', 'children'),
    [Input('patient-dropdown', 'value'), Input('six-weeks-line-toggle', 'value'), Input('t-dates-toggle', 'value'),Input('question-dropdown', 'value'), Input('volume-of-notes-toggle', 'value')]
)
def update_graphs_container(selected_patient_ids, toggle_values, t_dates_toggle, selected_questions, volume_of_notes_toggle):
    graphs = []
    for selected_patient_id in selected_patient_ids:
        fig = update_figure(selected_patient_id, toggle_values, t_dates_toggle, selected_questions, volume_of_notes_toggle)
        graphs.append(dcc.Graph(figure=fig))
    return graphs

update_figure 函数处理用户可以使用的所有设置，例如显示患者发生重要事件（即入院和手术日期）时的其他有用指示器。我相信我应该在此函数中添加 clickEvent 处理程序，但我不确定如何添加。现在，如果您能帮助我实现一个占位符策略，这将是一个巨大的帮助，该策略基本上在单击时返回数据点的日期（x 轴）。我相信我应该为图表提供唯一的 ID，但我真的不确定。

如果您需要更多我的代码片段，我很乐意分享，但出于隐私原因，我必须进行一些更改。

提前致谢！

Answer 1

您需要为创建的每个图表设置一个复合 id（即使用字典而不是字符串），以便您可以利用 Dash 模式匹配回调：

@app.callback(
    Output('graphs-container', 'children'),
    [Input('patient-dropdown', 'value'), Input('six-weeks-line-toggle', 'value'), Input('t-dates-toggle', 'value'),Input('question-dropdown', 'value'), Input('volume-of-notes-toggle', 'value')]
)
def update_graphs_container(selected_patient_ids, toggle_values, t_dates_toggle, selected_questions, volume_of_notes_toggle):
    graphs = []
    for selected_patient_id in selected_patient_ids:
        fig = update_figure(selected_patient_id, toggle_values, t_dates_toggle, selected_questions, volume_of_notes_toggle)
        graph_id = {'type': 'graph', 'patient_id': selected_patient_id}
        graphs.append(dcc.Graph(id=graph_id, figure=fig))
    return graphs

这允许注册并仅使用一个通用回调来处理“graph”类型的任何组件的

clickData

输入（或任何其他支持的属性）（取决于

MATCH

、

ALL

和

ALLSMALLER

）。假设您只需要接收

MATCH

ing 图表的

clickData

（用户点击的图表），您可以执行以下操作：

@callback(
    Output('<some_id>', '<some_property>'),
    Input({'type': 'graph', 'patient_id': MATCH}, 'clickData'),
    prevent_initial_call=True
)
def handle_click(clickData):
    print(clickData)
    something = do_something(clickData)
    return something

如果您需要在回调中更新匹配图形的图形（例如，或另一个图形道具），请使用

MATCH

选择器，就像输入一样，即。

Output({'type': 'graph', 'patient_id': MATCH}, 'figure')

。