如何修改Plotly堆叠折线图的hover提示内容为y3、y4数据？

现有如下Plotly代码，用于生成堆叠折线图：

x=["a","b","c","d"]
y1=[1,3,7,2]
y2=[3,6,1,2]
y3=[0.25, 0.33, 0.875, 0.5]
y4=[0.75, 0.66, 0.125, 0.5]
fig = go.Figure([
    go.Scatter(
        name='Data 1',
        x=x,
        y=y1,
        marker=dict(color="red"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one'
   ),
    go.Scatter(
        name='Data 2',
        x=x,
        y=y2,
        marker=dict(color="blue"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one'
   )
])

fig.update_layout(
    hovermode="x unified",
)
    
fig.show()

生成的图表如下：

需求：修改悬浮提示框内容，不显示绘图用的y1、y2数据，改为显示y3、y4的数据，例如在对应位置展示“Data 1: 0.875%”和“Data 2: 0.125%”。

解决方案 #

可以通过两种方式实现自定义悬浮提示内容，以下是具体修改方案：

方法1：直接指定hovertext文本 #

为每个go.Scatter系列添加hovertext参数，将y3、y4的数据格式化为目标字符串：

x=["a","b","c","d"]
y1=[1,3,7,2]
y2=[3,6,1,2]
y3=[0.25, 0.33, 0.875, 0.5]
y4=[0.75, 0.66, 0.125, 0.5]
fig = go.Figure([
    go.Scatter(
        name='Data 1',
        x=x,
        y=y1,
        marker=dict(color="red"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one',
        # 格式化y3数据为提示文本
        hovertext=[f"Data 1: {val}%" for val in y3]
   ),
    go.Scatter(
        name='Data 2',
        x=x,
        y=y2,
        marker=dict(color="blue"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one',
        # 格式化y4数据为提示文本
        hovertext=[f"Data 2: {val}%" for val in y4]
   )
])

fig.update_layout(
    hovermode="x unified",
)
    
fig.show()

方法2：使用hovertemplate自定义模板 #

通过customdata传递y3、y4数据，再用hovertemplate定义提示框的显示格式，灵活性更强：

x=["a","b","c","d"]
y1=[1,3,7,2]
y2=[3,6,1,2]
y3=[0.25, 0.33, 0.875, 0.5]
y4=[0.75, 0.66, 0.125, 0.5]
fig = go.Figure([
    go.Scatter(
        name='Data 1',
        x=x,
        y=y1,
        marker=dict(color="red"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one',
        # 传递自定义数据y3
        customdata=y3,
        # 定义提示模板，引用自定义数据并格式化
        hovertemplate='Data 1: %{customdata}%<extra></extra>'
   ),
    go.Scatter(
        name='Data 2',
        x=x,
        y=y2,
        marker=dict(color="blue"),
        line=dict(width=3),
        mode='lines',
        line_shape='spline',
        stackgroup='one',
        # 传递自定义数据y4
        customdata=y4,
        # 定义提示模板，引用自定义数据并格式化
        hovertemplate='Data 2: %{customdata}%<extra></extra>'
   )
])

fig.update_layout(
    hovermode="x unified",
)
    
fig.show()

说明 #

• <extra></extra>用于隐藏Plotly默认显示的系列名称（已在模板中自定义名称），若需要保留默认额外信息可删除该部分。
• 两种方法均能实现需求，hovertemplate适合需要添加更多提示元素（如x轴值）的场景。

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