Plotly实现饼图悬停展示各产品分类下的客户营收拆分明细

实现逻辑 #

Plotly 饼图默认仅展示聚合维度的总值与占比，要实现悬停展示细分维度明细的效果，不需要修改底层绘图逻辑，只要提前把每个扇区对应的客户维度明细拼接成可识别的文本，绑定到自定义悬停字段即可。

操作步骤 #

1. 预处理明细数据 #

按维度聚合，生成每个产品对应的客户营收明细文本：

# 计算每个客户在对应产品上的累计营收
cust_prod_rev = df.groupby(['Product', 'Customer'])['Revenue'].sum().reset_index()

# 定义函数，把同产品下的所有客户营收拼成多行展示文本
def build_hover_detail(group):
    text_lines = [f"<b>{group.name}</b>"]
    for _, row in group.iterrows():
        text_lines.append(f"{row['Customer']}: {row['Revenue']}")
    # 用<br>做换行，适配Plotly悬停框的HTML渲染规则
    return "<br>".join(text_lines)

# 生成每个产品对应的完整悬停文本
hover_detail = cust_prod_rev.groupby('Product').apply(build_hover_detail).reset_index(name='hover_text')

# 计算每个产品的总营收，作为饼图扇区的取值依据
prod_total = df.groupby('Product')['Revenue'].sum().reset_index()

# 合并得到饼图绘图所需的完整数据源
plot_data = prod_total.merge(hover_detail, on='Product')

2. 配置悬停规则生成饼图 #

生成图表时将提前准备好的明细文本绑定到自定义字段，替换默认的悬停提示规则：

fig = px.pie(
    plot_data,
    values='Revenue',
    names='Product',
    # 把明细文本设为自定义绘图数据
    custom_data=['hover_text']
)

# 替换默认悬停模板，直接展示拼接好的明细内容
fig.update_traces(
    # <extra></extra>用于隐藏悬停框右上角的默认系列标识，避免多余内容干扰展示
    hovertemplate='%{customdata[0]}<extra></extra>'
)

fig.show()

注意事项 #

• 生成的图表悬停在DIGITAL扇区时，会逐行展示所有购买该产品的客户及对应累计营收，和示例要求的展示格式完全匹配
• 若需要调整文本样式（比如加粗、改字体颜色），只要在拼接文本时添加对应的基础HTML标签即可，Plotly悬停框支持该类渲染
• 最初示例代码中将原始字典d直接传给px.pie会触发类型错误，实际绘图需使用转换完成的DataFrame对象df

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