Dash TreeMap子容器点击后显示完整Hover数据的实现问题

当用Dash搭建股票仪表盘时，Plotly TreeMap的hover_data已经配置了完整的股票指标（如PE、EPS、换手率），但默认点击子容器后仅显示标签和市值，无法直接查看所有指标。可以通过Dash的回调功能捕获点击事件，在页面中展示完整的指标数据。

原问题示例代码 #

以下是模拟你场景的基础代码，TreeMap配置了hover_data但点击后无完整数据展示：

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

# 模拟股票数据集
df = pd.DataFrame({
    '行业': ['科技', '科技', '金融', '金融', '消费'],
    '股票代码': ['AAPL', 'MSFT', 'JPM', 'BAC', 'WMT'],
    '市值': [28000, 25000, 4000, 3500, 4500],
    'PE': [28, 32, 10, 9, 15],
    'EPS': [6.15, 9.21, 10.5, 7.8, 5.4],
    '换手率': [0.8, 0.6, 0.4, 0.3, 0.5]
})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('股票市场仪表盘'),
    dcc.Graph(
        id='treemap',
        figure=px.treemap(
            df,
            path=['行业', '股票代码'],
            values='市值',
            hover_data=['PE', 'EPS', '换手率'],
            color='PE',
            color_continuous_scale='RdBu'
        )
    )
])

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

原问题效果说明 #

截图场景：

• 悬浮子容器（如AAPL）时，悬浮框显示完整的市值、PE、EPS、换手率指标
• 点击子容器后，仅在TreeMap的默认提示中显示层级标签（如"科技 > AAPL"）和市值，无法查看其他指标

解决方案：添加回调展示点击数据 #

在原有代码基础上，新增一个用于展示详情的容器，并添加回调监听TreeMap的点击事件，提取并展示完整指标：

修改后的完整代码 #

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

# 模拟股票数据集
df = pd.DataFrame({
    '行业': ['科技', '科技', '金融', '金融', '消费'],
    '股票代码': ['AAPL', 'MSFT', 'JPM', 'BAC', 'WMT'],
    '市值': [28000, 25000, 4000, 3500, 4500],
    'PE': [28, 32, 10, 9, 15],
    'EPS': [6.15, 9.21, 10.5, 7.8, 5.4],
    '换手率': [0.8, 0.6, 0.4, 0.3, 0.5]
})

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('股票市场仪表盘'),
    dcc.Graph(
        id='treemap',
        figure=px.treemap(
            df,
            path=['行业', '股票代码'],
            values='市值',
            hover_data=['PE', 'EPS', '换手率'],
            color='PE',
            color_continuous_scale='RdBu'
        )
    ),
    # 新增详情展示容器
    html.Div(
        id='click-details',
        style={'margin-top': '20px', 'padding': '15px', 'border-radius': '5px', 'border': '1px solid #e0e0e0'}
    )
])

# 回调函数：捕获点击事件并展示完整数据
@app.callback(
    Output('click-details', 'children'),
    Input('treemap', 'clickData')
)
def display_stock_details(click_data):
    if not click_data:
        return html.P('点击TreeMap中的股票子容器查看完整指标')
    
    # 提取点击节点的核心数据
    point = click_data['points'][0]
    custom_data = point['customdata']  # hover_data对应的自定义数据
    
    # 构建详情内容
    return html.Div([
        html.H3(f"{point['label']} 指标详情"),
        html.Ul([
            html.Li(f"所属行业: {point['parent']}"),
            html.Li(f"总市值: {point['value']} 亿元"),
            html.Li(f"市盈率(PE): {custom_data[0]}"),
            html.Li(f"每股收益(EPS): {custom_data[1]} 元"),
            html.Li(f"日换手率: {custom_data[2]}%")
        ])
    ])

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

关键说明 #

1. 数据对应关系：hover_data中配置的字段会按顺序存入点击事件返回的customdata中，需保证提取顺序和配置顺序一致
2. 自定义展示样式：可以根据需求将click-details容器改为表格、卡片等格式，优化视觉效果
3. 异常处理：添加了未点击时的提示文本，避免页面出现空白

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