如何创建带双向联动高亮功能的Dash/Plotly双柱状图仪表盘？

直接上可运行的完整代码，核心是通过监听两个图表的点击事件，同步更新两个图的柱子颜色：

import dash
from dash import dcc, html, Input, Output, callback
import plotly.graph_objects as go
import pandas as pd

# 替换成你的业务数据
df = pd.DataFrame({
    '产品': ['产品A', '产品B', '产品C', '产品D'],
    '销量': [120, 200, 150, 180],
    '营收': [6000, 10000, 7500, 9000]
})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.Div([
        dcc.Graph(id='bar-sales', figure={}),
    ], style={'width': '48%', 'display': 'inline-block'}),
    html.Div([
        dcc.Graph(id='bar-revenue', figure={}),
    ], style={'width': '48%', 'display': 'inline-block'})
])

@callback(
    [Output('bar-sales', 'figure'),
     Output('bar-revenue', 'figure')],
    [Input('bar-sales', 'clickData'),
     Input('bar-revenue', 'clickData')]
)
def update_graphs(click_sales, click_revenue):
    # 确定当前选中的产品：取最新的点击事件
    selected_product = None
    # 这里的顺序决定点击优先级，后判断的会覆盖先判断的
    if click_revenue:
        selected_product = click_revenue['points'][0]['x']
    if click_sales:
        selected_product = click_sales['points'][0]['x']
    
    # 生成颜色数组：选中产品用高亮色，其余用浅灰
    highlight_color = '#1f77b4'
    default_color = '#cccccc'
    colors = [highlight_color if prod == selected_product else default_color for prod in df['产品']]
    
    # 构建销量图
    fig_sales = go.Figure(go.Bar(
        x=df['产品'],
        y=df['销量'],
        marker_color=colors,
        hoverinfo='x+y'
    ))
    fig_sales.update_layout(title='产品销量', xaxis_title='产品', yaxis_title='销量')
    
    # 构建营收图
    fig_revenue = go.Figure(go.Bar(
        x=df['产品'],
        y=df['营收'],
        marker_color=colors,
        hoverinfo='x+y'
    ))
    fig_revenue.update_layout(title='产品营收', xaxis_title='产品', yaxis_title='营收')
    
    return fig_sales, fig_revenue

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

关键逻辑说明 #

1. 事件监听：同时监听两个柱状图的clickData参数，这是Dash获取图表点击事件数据的核心方式。
2. 选中产品判定：通过判断两个clickData的存在性，确定用户最新点击的产品（代码里后判断的点击事件会覆盖前一个，比如先点营收图再点销量图，最终选中销量图的产品）。
3. 颜色同步：生成统一的颜色数组，选中的产品用高亮色，其余用默认浅灰色，两个图表共用这个颜色数组，实现同步高亮。
4. 布局适配：两个图表各占页面48%宽度，横向排列，适配不同屏幕尺寸。

你可以直接运行这段代码，点击任一图表的产品柱子，两个图的对应产品都会同步高亮；切换点击其他产品，高亮也会同步切换，完全符合你要的双向联动效果。

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