Plotly Treemap仅在子容器显示悬停信息的技术问询

针对你遇到的父容器悬停显示异常、仅需子容器展示详细悬停信息的问题，以下是两种可行的解决方案：

方案一：仅保留子容器悬停效果，禁用父容器悬停 #

利用Treemap节点的depth属性区分层级（你的路径['Sector','Symbol']对应：父容器Sector为depth=1，子容器Symbol为depth=2），为不同层级节点设置不同的悬停模板，父容器直接设置为空模板禁用悬停。

修改后的核心代码 #

Data_source = "data/dashbaord_ohlc_df_4_processed.csv"
PATH = ['Sector','Symbol']
HOVER_DATA = ['Name','Country','Currency','Market Capitalization', 'Most Recent Quarter','PE Ratio%','PEG Ratio%','Earnings Share','Dividend Yield','Operating Margin TTM','Return OnAssets TTM','Return OnEquity TTM','Quarterly Earnings GrowthYOY','Quarterly Revenue GrowthYOY','dailyChange']
value_attribute = 'Market Capitalization'
COLOR = 'dailyChange'
infotext =  "label + percent parent"

# 子容器的详细悬停模板
Hover_Tmp = (
    '<br>Name:%{customdata[0]}'
    '<br>Country:%{customdata[1]}'
    '<br>Currency:%{customdata[2]}'
    '<br>Daily Change: %{customdata[14]}%'
    '<br>Market Capitalization:%{value:0.3s}'
    '<br>Most Recent Quarter:%{customdata[4]}'
    '<br>PE Ratio:%{customdata[5]}%'
    '<br>PEG Ratio:%{customdata[6]}%'
    '<br>Earnings Share:%{customdata[7]}'
    '<br>Dividend Yield:%{customdata[8]}'
    '<br>Operating Margin TTM:%{customdata[9]}'
    '<br>Return OnAssets TTM:%{customdata[10]}'
    '<br>Return OnEquity TTM:%{customdata[11]}'
    '<br>Quarterly Earnings GrowthYOY:%{customdata[12]}'
    '<br>Quarterly Revenue GrowthYOY:%{customdata[13]}'
)

df = pd.read_csv(Data_source, usecols = ['Name','Country','Currency','Market Capitalization', 'Most Recent Quarter','PE Ratio%','PEG Ratio%','Earnings Share','Dividend Yield','Operating Margin TTM','Return OnAssets TTM','Return OnEquity TTM','Quarterly Earnings GrowthYOY','Quarterly Revenue GrowthYOY', 'dailyChange', 'date', 'Sector', 'Symbol', 'DailyChangeTreeMap', 'Condition'])

def update_output(theme_select, my_date_picker_single,dd_output_container):
    filtered_df = filter_df(my_date_picker_single,dd_output_container)  # 接收过滤后的数据集
    indicator = px.treemap(filtered_df,
                title = "Market Overview",
                color=COLOR,
                color_continuous_scale=color_discrete_map,
                path = PATH, 
                hover_data=HOVER_DATA, 
                values=value_attribute,
                color_discrete_map=color_discrete_map)

    indicator.update_traces(textfont_size=16,)
    indicator.update_layout(margin = dict(t=35, l=5, r=5, b=5),
                    paper_bgcolor='rgba(0,0,255,0)',
                    plot_bgcolor='rgba(0,0,255,0)')
    
    # 为子容器（depth=2）设置详细悬停模板
    indicator.update_traces(
        hovertemplate=Hover_Tmp + '<extra></extra>',  # <extra></extra>隐藏默认trace名称
        selector=dict(depth=2)
    )
    # 为父容器（depth=1）设置空模板，禁用悬停
    indicator.update_traces(
        hovertemplate='',
        selector=dict(depth=1)
    )

    # 修正texttemplate的语法错误
    indicator.data[0].texttemplate = "<b>%{label} </b><br><span class='innertext'>%{customdata[14]}%<br>Market Cap.:%{value:0.3s}"

    return indicator 

方案二：自定义父容器悬停内容，子容器保留详细信息 #

如果需要父容器显示基础汇总信息（如行业总市值、占比），可以为父容器单独设置简洁的悬停模板。

修改后的核心悬停模板设置 #

# 父容器（Sector）的简洁悬停模板
parent_hover_template = (
    '<b>%{label}</b><br>'
    'Total Market Capitalization: %{value:0.3s}<br>'
    'Percentage of Total: %{percentRoot:.2%}<br>'
    '<extra></extra>'
)

# 子容器（Symbol）的详细悬停模板
child_hover_template = Hover_Tmp + '<extra></extra>'

# 分别为不同层级设置模板
indicator.update_traces(
    hovertemplate=parent_hover_template,
    selector=dict(depth=1)
)

indicator.update_traces(
    hovertemplate=child_hover_template,
    selector=dict(depth=2)
)

关键修正说明 #

1. 修复了texttemplate中的语法错误：将% customdata[14]}%改为%{customdata[14]}%
2. 通过selector=dict(depth=X)精准定位父/子容器节点，避免全局模板导致的异常
3. 添加<extra></extra>隐藏Plotly默认的trace标识，优化悬停界面整洁度
4. 确保filter_df返回的过滤数据集被正确赋值给filtered_df

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