Plotly Python：点击堆叠条形图区块展示对应独立折线图

要实现这个需求，核心是利用Plotly结合Dash的回调功能，捕捉堆叠条形图的点击事件，根据点击的区块标识更新折线图内容。以下是完整实现方案：

步骤1：准备示例数据 #

假设我们有堆叠条形图的分类数据（不同类别A/B/C的月度占比），以及对应每个类别的折线图数据（月度趋势）：

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

# 堆叠条形图数据
bar_data = pd.DataFrame({
    '月份': ['1月', '2月', '3月', '4月'],
    'A': [30, 40, 35, 50],
    'B': [20, 25, 30, 20],
    'C': [50, 35, 35, 30]
})

# 折线图数据，每个类别对应单独的趋势
line_data = {
    'A': pd.DataFrame({'月份': ['1月', '2月', '3月', '4月'], '数值': [120, 150, 130, 180]}),
    'B': pd.DataFrame({'月份': ['1月', '2月', '3月', '4月'], '数值': [80, 90, 110, 95]}),
    'C': pd.DataFrame({'月份': ['1月', '2月', '3月', '4月'], '数值': [200, 180, 190, 210]})
}

步骤2：构建Dash应用与堆叠条形图 #

将堆叠条形图和折线图放在同一页面，为条形图的每个区块添加类别标识（通过customdata参数），方便后续回调识别：

app = Dash(__name__)

# 构建堆叠条形图，给每个区块添加customdata存储类别
fig_bar = px.bar(bar_data, x='月份', y=['A', 'B', 'C'], barmode='stack')
# 为每个轨迹设置customdata，对应类别名称
for trace in fig_bar.data:
    trace.customdata = [trace.name] * len(bar_data)

app.layout = html.Div([
    html.H3("堆叠条形图点击展示折线图"),
    dcc.Graph(id='stacked-bar-chart', figure=fig_bar),
    html.H4("对应类别趋势折线图"),
    dcc.Graph(id='line-chart')
])

步骤3：编写点击事件回调 #

通过clickData获取点击的区块信息，解析出类别后更新折线图内容：

@app.callback(
    Output('line-chart', 'figure'),
    Input('stacked-bar-chart', 'clickData')
)
def update_line_chart(click_data):
    # 默认展示第一个类别的折线图
    if not click_data:
        fig_line = px.line(line_data['A'], x='月份', y='数值', title='类别A趋势')
        return fig_line
    
    # 从点击数据中提取类别名称
    category = click_data['points'][0]['customdata']
    # 根据类别获取对应的折线数据
    df = line_data[category]
    # 生成折线图
    fig_line = px.line(df, x='月份', y='数值', title=f'类别{category}趋势')
    return fig_line

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

关键说明 #

• customdata的作用：给堆叠条形图的每个轨迹（A/B/C类别）添加customdata，确保点击任意区块时能直接获取对应类别名称，避免解析x/y值的歧义。
• 回调逻辑：无点击时默认展示第一个类别的折线图；点击后根据clickData中的customdata匹配对应折线数据，动态更新图表。
• 扩展性：若需支持更复杂的数据结构，只需调整line_data的存储方式及回调中提取类别的逻辑即可。

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