网站模板图青岛网站权重提升

在 Plotly 的 go.Bar 图中，如果你想让鼠标悬停时 (hover) 显示的文本 (hovertext) 与图例 (legend) 一致，可以通过 hovertemplate 来控制悬停时的显示内容。

---

实现方法

hovertemplate 是一种自定义工具，允许你完全控制悬停时的文本显示格式。可以将它设置为和图例名称（name 属性）一致的内容。

以下是具体方法：

---

完整示例

import plotly.graph_objects as go# 创建柱状图数据
fig = go.Figure()fig.add_trace(go.Bar(x=["A", "B", "C"],  # X轴数据y=[10, 20, 15],     # Y轴数据name="Legend Label 1",  # 图例名称hovertemplate='%{legendgroup}',  # 使用图例分组作为悬停文本legendgroup="Legend Label 1"  # 绑定图例和hover显示内容
))fig.add_trace(go.Bar(x=["A", "B", "C"],y=[5, 15, 10],name="Legend Label 2",hovertemplate='%{legendgroup}',  # 同样使用图例分组作为悬停文本legendgroup="Legend Label 2"
))# 更新布局
fig.update_layout(title="Bar Chart with Hovertext as Legend",xaxis_title="Categories",yaxis_title="Values",hovermode="x unified"  # 鼠标悬停效果可以设置为按x轴对齐
)fig.show()

---

关键点解释

1. hovertemplate='%{legendgroup}':

   • legendgroup 属性可以绑定图例组，hovertemplate 中引用 %{legendgroup} 就能动态显示图例的名称。

2. legendgroup 属性:

   • 图例组的作用是将图例和悬停文本绑定在一起。
   • 如果未显式设置 legendgroup，可以直接使用图例的名称（name 属性）来代替。

3. 图例名称的来源:

   • name="Legend Label 1"：柱状图的图例名称。hovertemplate 可通过 %{legendgroup} 动态使用此名称。

4. 其他悬停数据可用字段:

   • %{x}：显示 X 轴值。
   • %{y}：显示 Y 轴值。
   • %{customdata}：显示自定义数据（如果设置了 customdata）。
   • %{text}：如果设置了 text 属性（与 hovertext 绑定），则可显示额外文本。

---

修改悬停文本的样式

你也可以在 hovertemplate 中使用 HTML 或其他格式化方式：

示例：

hovertemplate = '<b>%{legendgroup}</b><br>Value: %{y}<extra></extra>'

• <b></b>：加粗图例名称。
• <br>：换行。
• <extra></extra>：隐藏默认的悬停框。

---

总结

通过设置 hovertemplate='%{legendgroup}' 并结合 legendgroup 属性，可以让悬停时的文本与图例保持一致。