Python实现两个关联联动图表，选中右侧数据后左侧图表实时更新

依赖库 #

你需要安装3个Python库完成需求，安装命令如下：

pip install pandas plotly dash

• pandas：用于处理你的结构化DataFrame数据源
• plotly：用于快速生成交互式图表
• dash：用于实现两个图表的选中联动逻辑

实现逻辑 #

1. 页面布局拆分为左右两栏，分别放置两个图表组件
2. 右侧图表使用DataFrame第一列数据渲染
3. 配置回调函数：将右侧图表的点击/选中事件作为输入，左侧图表的渲染配置作为输出
4. 每次在右侧选中数据时，回调自动提取选中项对应的行数据，重新渲染左侧图表

完整可运行示例代码 #

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

# 模拟你提到的5列标准DataFrame，可替换为你自己的数据源
df = pd.DataFrame({
    '项目名': ['项目A', '项目B', '项目C', '项目D', '项目E'], # 第一列，用于渲染右侧图表
    '指标1': [23, 45, 12, 67, 39],
    '指标2': [15, 32, 48, 22, 51],
    '指标3': [78, 55, 36, 29, 64],
    '指标4': [42, 18, 71, 33, 59]
})

# 初始化dash应用
app = Dash(__name__)

# 页面布局：左右两栏放置两个图表
app.layout = html.Div([
    dcc.Graph(id='left-graph', style={'width': '48%', 'display': 'inline-block'}),
    dcc.Graph(id='right-graph', figure=px.bar(df, x='项目名', y='指标1', title='右侧图表（点击选中项目）'), style={'width': '48%', 'display': 'inline-block'})
])

# 联动回调：点击右侧图表时更新左侧图表
@app.callback(
    Output('left-graph', 'figure'),
    Input('right-graph', 'clickData')
)
def update_left(click_data):
    # 默认选中第一行数据
    select_idx = 0
    if click_data:
        # 提取选中的行索引
        select_idx = click_data['points'][0]['pointIndex']
    # 取选中行的后4列数据
    row_data = df.iloc[select_idx, 1:]
    # 渲染左侧图表（可根据需求修改图表类型，比如折线图、饼图等）
    return px.bar(x=row_data.index, y=row_data.values, title=f'左侧图表：{df.iloc[select_idx, 0]} 指标详情')

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

使用说明 #

• 运行代码后打开浏览器访问终端输出的本地服务地址即可看到效果
• 点击右侧图表任意柱形，左侧图表会自动同步更新为对应行的其余4列数据的可视化结果
• 如需支持框选多个数据联动，将回调输入改为right-graph的selectedData属性，同时开启右侧图表的框选工具即可

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