实现跨标签页的Plotly交互式数据可视化与表格双向联动

以下基于Dash框架（Plotly生态中构建交互式应用的主流工具）给出实现方案，覆盖图表点击联动表格筛选高亮、以及表格反向联动图表的双向关联逻辑：

1. 基础应用结构搭建 #

先完成带标签页的基础框架，包含数据表格和Plotly散点图两个标签：

import dash
from dash import Dash, html, dcc, Input, Output, State, callback
import plotly.express as px
import pandas as pd
from dash_table import DataTable

app = Dash(__name__)

# 替换为你上传的DataFrame数据
df = px.data.iris()

app.layout = html.Div([
    dcc.Tabs(id="tabs", value='table-tab', children=[
        dcc.Tab(label='数据表格', value='table-tab'),
        dcc.Tab(label='可视化图表', value='graph-tab'),
    ]),
    html.Div(id='tab-content')
])

# 渲染标签页内容的回调
@callback(Output('tab-content', 'children'),
          Input('tabs', 'value'))
def render_content(tab):
    if tab == 'table-tab':
        return DataTable(
            id='data-table',
            columns=[{"name": col, "id": col} for col in df.columns],
            data=df.to_dict('records'),
            style_data_conditional=[],
            filter_action="native",
            sort_action="native",
            row_selectable="multi"
        )
    elif tab == 'graph-tab':
        fig = px.scatter(df, x='sepal_length', y='sepal_width', color='species')
        fig.update_layout(clickmode='event+select')  # 开启点击选择模式
        return dcc.Graph(id='scatter-plot', figure=fig)

if __name__ == '__main__':
    app.run_server(debug=True)

2. 图表点击 → 表格筛选+高亮 #

添加回调监听散点图的点击事件，切换到表格标签时自动筛选并高亮对应数据：

@callback(
    [Output('data-table', 'style_data_conditional'),
     Output('data-table', 'filter_query')],
    Input('tabs', 'value'),
    State('scatter-plot', 'clickData'),
    State('data-table', 'filter_query'),
    prevent_initial_call=True
)
def update_table_on_graph_click(tab_value, click_data, current_filter):
    if tab_value != 'table-tab' or not click_data:
        return dash.no_update, dash.no_update
    
    # 获取点击点的索引
    selected_indices = [point['pointIndex'] for point in click_data['points']]
    selected_rows = df.iloc[selected_indices]
    
    # 构建筛选条件（建议用数据的唯一标识列，比如ID，避免排序后索引混乱）
    filter_conditions = []
    for _, row in selected_rows.iterrows():
        filter_conditions.append(f"sepal_length = {row['sepal_length']} && sepal_width = {row['sepal_width']}")
    filter_query = " || ".join(filter_conditions) if filter_conditions else ""
    
    # 构建高亮样式
    highlight_style = [
        {
            'if': {'row_index': idx},
            'backgroundColor': '#FFD700',
            'color': 'black'
        } for idx in selected_indices
    ]
    
    return highlight_style, filter_query

3. 表格选中 → 图表高亮（双向关联） #

添加回调监听表格的选中行事件，同步高亮图表对应数据点：

@callback(
    Output('scatter-plot', 'figure'),
    Input('data-table', 'selected_rows'),
    State('scatter-plot', 'figure'),
    prevent_initial_call=True
)
def update_graph_on_table_select(selected_rows, fig):
    if not selected_rows:
        # 清除图表选中状态
        for trace in fig['data']:
            trace['selectedpoints'] = []
        return fig
    
    # 获取表格选中行的索引
    selected_indices = [row['row_index'] for row in selected_rows]
    
    # 更新图表选中点
    for trace in fig['data']:
        trace['selectedpoints'] = selected_indices
    
    return fig

核心注意事项 #

• 必须开启Plotly图表的clickmode='event+select'，才能捕获点击事件的点数据
• 若数据存在唯一标识列（如用户ID、记录ID），优先用唯一标识构建筛选条件，避免数据排序后索引失效
• 回调中使用dash.no_update避免无意义的组件更新，提升应用性能

内容的提问来源于stack exchange，提问作者Neophytos Kouphou