Plotly堆叠条形图：自定义分段标签与非默认悬浮信息实现

当然可行啦！完全不需要叠加两个图表，Plotly本身就提供了直接的参数来实现这两个核心需求——在堆叠条形的分段上显示数值，同时自定义鼠标悬浮时展示的额外信息。我给你详细拆解一下怎么做：

方法一：用Plotly Express快速实现（推荐） #

Plotly Express对Pandas DataFrame的支持非常友好，几行代码就能搞定堆叠图+分段数值+自定义hover信息：

完整代码示例 #

import plotly.express as px
import pandas as pd

# 构造示例数据，模拟你的业务场景
df = pd.DataFrame({
    "产品": ["手机", "手机", "电脑", "电脑", "平板", "平板"],
    "类别": ["线上", "线下", "线上", "线下", "线上", "线下"],
    "销量": [1200, 800, 900, 700, 600, 500],
    "利润率": ["15%", "12%", "20%", "18%", "10%", "8%"],
    "区域": ["华东", "华南", "华北", "西南", "华中", "西北"]
})

# 创建堆叠条形图
fig = px.bar(
    df,
    x="产品",
    y="销量",
    color="类别",
    text="销量",  # 指定要显示在分段上的数值（y值）
    textposition="inside",  # 数值显示位置，可选'outside'/'auto'等
    hover_data={"销量": False, "利润率": True, "区域": True},  # 控制hover显示的字段：隐藏默认销量，加入利润率和区域
    stacked=True
)

# 自定义hover模板，让悬浮信息更清晰美观
fig.update_traces(
    hovertemplate="<b>产品:</b> %{x}<br>"
                  "<b>销售渠道:</b> %{name}<br>"
                  "<b>销量:</b> %{y}<br>"
                  "<b>利润率:</b> %{customdata[0]}<br>"
                  "<b>覆盖区域:</b> %{customdata[1]}<extra></extra>"
)

fig.show()

参数说明 #

• text="销量"：直接把y值（销量）绑定到条形分段上显示
• textposition="inside"：让数值显示在分段内部，避免和其他分段重叠；如果数值太大，也可以选"outside"
• hover_data：用来筛选要加入hover的额外字段，这里把默认的销量设为False（因为我们要在模板里自定义显示格式），同时加入利润率和区域
• hovertemplate：完全自定义悬浮内容的格式，%{x}对应x轴值，%{name}是颜色分组的名称（类别），%{y}是y值，%{customdata}对应hover_data里指定的额外字段，顺序和hover_data中True字段一致；<extra></extra>用来去掉Plotly默认的trace名称，让hover更干净

方法二：用Plotly Graph Objects自定义实现 #

如果你需要更精细的控制，比如对每个trace单独设置样式，可以用Graph Objects来手动添加每个堆叠层：

完整代码示例 #

import plotly.graph_objects as go
import pandas as pd

# 构造宽格式的示例数据
df = pd.DataFrame({
    "产品": ["手机", "电脑", "平板"],
    "线上销量": [1200, 900, 600],
    "线下销量": [800, 700, 500],
    "线上利润率": ["15%", "20%", "10%"],
    "线下利润率": ["12%", "18%", "8%"],
    "线上区域": ["华东", "华北", "华中"],
    "线下区域": ["华南", "西南", "西北"]
})

fig = go.Figure()

# 添加"线上"堆叠层
fig.add_trace(go.Bar(
    x=df["产品"],
    y=df["线上销量"],
    name="线上",
    text=df["线上销量"],
    textposition="inside",
    # 自定义hover文本，直接拼接额外信息
    hovertext=[f"利润率: {p}<br>区域: {r}" for p, r in zip(df["线上利润率"], df["线上区域"])],
    hoverinfo="text+x+y+name"  # 指定hover要显示的内容：自定义文本、x、y、分组名称
))

# 添加"线下"堆叠层
fig.add_trace(go.Bar(
    x=df["产品"],
    y=df["线下销量"],
    name="线下",
    text=df["线下销量"],
    textposition="inside",
    hovertext=[f"利润率: {p}<br>区域: {r}" for p, r in zip(df["线下利润率"], df["线下区域"])],
    hoverinfo="text+x+y+name"
))

# 设置堆叠模式
fig.update_layout(barmode="stack")

fig.show()

参数说明 #

• hovertext：直接构造包含额外信息的字符串列表，每个元素对应一个条形的悬浮内容
• hoverinfo：指定要显示的内容组合，这里选了自定义文本、x轴值、y轴值和分组名称，完全按你的需求展示

总结 #

不管用哪种方法，都能轻松实现：

• 在堆叠条形的每个分段上显示y值（比如销量）
• 鼠标悬浮时展示除了名称、x、y之外的其他信息（比如利润率、区域）
  而且全程不需要叠加多个图表，都是单个图表内完成的。如果你的数据是长格式的，优先用Plotly Express，代码更简洁；如果需要更个性化的样式控制，就用Graph Objects。

内容的提问来源于stack exchange，提问作者Claudiu Creanga