当前位置：首页 > article >正文

go.Bar如何在lengend超长时候显示省略号，但是在hover时候显示完整值

article 2025/1/5 6:16:09

在 Plotly 的 go.Bar 图中，图例 (legend) 的显示内容过长时，可以通过以下方式实现：

在图例中显示省略号（通过限制图例名称长度）。
当用户将鼠标悬停在图例上时，通过悬停提示显示完整的名称。

虽然 Plotly 没有直接提供“自动省略图例并在悬停时显示完整值”的功能，但可以通过以下步骤实现这个效果：

方法 1：手动截断图例名称并自定义悬停提示

我们可以将 name 参数设置为截断的名称，并使用 hoverlabel 或 customdata 配合悬停时显示完整值。

代码示例

import plotly.graph_objects as go

# 长名称
full_names = ["This is a very long legend label for Group A", "Another extremely long legend for Group B"]
truncated_names = [name[:20] + "..." for name in full_names]  # 手动截断为 20 个字符并添加省略号

# 创建图表
fig = go.Figure()

# 添加第一个数据集
fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[10, 20, 15],
    name=truncated_names[0],  # 图例显示为截断名称
    customdata=[full_names[0]],  # 将完整名称存入 customdata
    hovertemplate='%{customdata}<br>Value: %{y}<extra></extra>'  # 悬停显示完整名称
))

# 添加第二个数据集
fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[5, 15, 10],
    name=truncated_names[1],  # 图例显示为截断名称
    customdata=[full_names[1]],  # 将完整名称存入 customdata
    hovertemplate='%{customdata}<br>Value: %{y}<extra></extra>'  # 悬停显示完整名称
))

# 显示图表
fig.show()

实现效果

图例中显示截断的名称（带省略号）。
鼠标悬停在柱子上时，会显示完整的名称和对应的值。

方法 2：自定义 HTML 样式控制图例文本的宽度

可以通过 layout.legend 中的 title 和 CSS 样式来限制图例的显示宽度，并让过长的文字自动显示省略号。

代码示例

import plotly.graph_objects as go

fig = go.Figure()

# 添加数据
fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[10, 20, 15],
    name="This is a very long legend label for Group A",
    hovertemplate='Group A<br>Value: %{y}<extra></extra>'
))

fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[5, 15, 10],
    name="Another extremely long legend for Group B",
    hovertemplate='Group B<br>Value: %{y}<extra></extra>'
))

# 设置图例样式
fig.update_layout(
    legend=dict(
        title="Legend Title",
        x=0.1,  # 图例在图表中的位置
        y=1.0,
        font=dict(size=12),  # 图例字体大小
        itemsizing='constant'
    )
)

fig.show()

方法 3：动态调整显示长度

如果需要自动调整长度，可以写一个函数动态计算截断的位置。以下示例将图例名称限制为 10 个字符加省略号，鼠标悬停时显示完整值：

def truncate_name(name, max_length=10):
    return name if len(name) <= max_length else name[:max_length] + "..."

# 使用函数生成截断名称
names = ["This is a very long legend label for Group A", "Another extremely long legend for Group B"]
truncated_names = [truncate_name(name, max_length=15) for name in names]

然后将 truncated_names 和 hovertemplate 结合使用，如方法 1。

总结

图例显示省略号：通过截断字符串（如 name[:20] + "..."）。
完整值显示：使用 hovertemplate 或 customdata 将完整值显示在鼠标悬停时。

hovertemplate如何不显示name值

在 Plotly 的 hovertemplate 中，可以通过自定义模板控制悬停时显示的内容，并通过 <extra></extra> 标签来隐藏默认显示的 name 值。

默认情况下，Plotly 会在悬停框中显示图例名称（即 name 的值）。如果不希望显示它，可以使用以下方法。

隐藏 `name` 值的方法

关键点：

使用 hovertemplate 自定义悬停文本。
添加 <extra></extra> 标签到模板中，可以完全隐藏 name 值。

示例代码

import plotly.graph_objects as go

fig = go.Figure()

# 添加第一个柱状图
fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[10, 20, 15],
    name="Group A",  # 图例名称
    hovertemplate='Value: %{y}<extra></extra>'  # 自定义悬停显示内容并隐藏 name
))

# 添加第二个柱状图
fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[5, 15, 10],
    name="Group B",  # 图例名称
    hovertemplate='Value: %{y}<extra></extra>'  # 隐藏 name 值
))

# 显示图表
fig.show()

效果说明

悬停显示内容：
- 只会显示 Value: 10（或其他对应值）。
- name（如 Group A 或 Group B）将不会出现在悬停提示中。
<extra></extra> 的作用：
- 默认情况下，Plotly 在悬停框中会自动附加 name 的值。
- <extra></extra> 用于清除这一附加内容。

灵活性：只隐藏 `name`，保留其他内容

如果需要完全定制显示内容（例如显示 X 值和 Y 值，但隐藏 name），可以通过 hovertemplate 定义。以下是一个例子：

fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[10, 20, 15],
    name="Group A",
    hovertemplate='X: %{x}<br>Y: %{y}<extra></extra>'  # 显示 X 和 Y，但不显示 name
))

悬停效果：

X: A
Y: 10

与其他属性配合

保留自定义数据：
如果需要额外显示一些自定义数据，可以使用 customdata：

fig.add_trace(go.Bar(
    x=["A", "B", "C"],
    y=[10, 20, 15],
    name="Group A",
    customdata=["Custom 1", "Custom 2", "Custom 3"],
    hovertemplate='Custom Data: %{customdata}<br>Value: %{y}<extra></extra>'
))