如何自定义悬停模板显示什么信息

Question

这是我的数据集：

按year锁定我的数据框并按month分组后，我继续计算百分比增加/减少作为一个新列；它最终看起来像这样：

现在对于我的 Plotly 图，我用它来显示痕迹并添加一些悬停信息：

fig.add_trace(go.Scatter(x=group_dfff.Months, y=group_dfff.Amount, name=i,
                        hovertemplate='Price: $%{y:.2f}'+'<br>Week: %{x}'))

现在你可以看到有一个参数

hovertemplate

我可以传递我的x和y ...但是，我不知道如何在其中包含我的PERC_CHANGE值。

问题：如何在

hovertemplate

中包含其他想要的列的值？具体来说，我如何包含 PERC_CHANGE 值，因为我在下面显示了所需的输出：

我解决了我的具体问题，查看下面的图片（添加第 3 个元素，请参阅评论），但是问题仍然相同，因为我看不到如何对第 4、第 5 等元素执行此操作。

Answer 1

对于 Plotly Express，您需要在创建图形时使用

custom_data

参数。例如：

fig = px.scatter(
    data_frame=df, 
    x='ColX', 
    y='ColY', 
    custom_data=['Col1', 'Col2', 'Col3']
)

然后使用

update_traces

和

hovertemplate

对其进行修改，将其引用为

customdata

。例如：

fig.update_traces(
    hovertemplate="<br>".join([
        "ColX: %{x}",
        "ColY: %{y}",
        "Col1: %{customdata[0]}",
        "Col2: %{customdata[1]}",
        "Col3: %{customdata[2]}",
    ])
)

这需要大量的反复试验才能弄清楚，因为它没有很好的记录，而且

custom_data

和

customdata

之间的不一致令人困惑。

Answer 2

我实际上遇到过类似的问题，相信我，我花了 2 个半小时才弄明白。让我们通过一个例子来理解。

fig = make_subplots(rows=1,cols=2,subplot_titles=('First plot','Second plot'),
                   specs=[[{'type': 'scene'}, {'type': 'scene'}]])

fig.add_trace(go.Scatter3d(x=[0,1,2,3],y=[0,1,2,3],z=[0,1,2,3]), row=1,col=1)
fig.add_trace(go.Scatter3d(x=[0,1,2,3],y=[0,1,2,3], z=[0,1,2,3]), row=1,col=2)

fig.update_layout(title='Add Custom Data')

fig.show()

这将创建两个简单的 scatter3d 图，其中 hoverdata 是 x、y 和 z 轴。现在您想将数据

m=[9,8,7,6,5]

添加到第一个图中。您可以在

m

参数中解析

text

并添加

hovertemplate

以及。

fig.add_trace(go.Scatter3d(x=[0,1,2,3],y=[0,1,2,3],z=[0,1,2,3],
                          text=[9,8,7,6], hovertemplate='<br>x:%{x}<br>y:%{y}<br>z:%{z}<br>m:%{text}'), row=1,col=1)

这应该可以正常工作。但是现在我们想再添加一个列表，比如

n=[5,6,7,8]

到第一个图（或任何图）。这次我们将使用

customdata

参数。

fig.add_trace(go.Scatter3d(x=[0,1,2,3],y=[0,1,2,3],z=[0,1,2,3],
                          text=[9,8,7,6],customdata=[5,6,7,8],
                          hovertemplate='<br>x:%{x}<br>y:%{y}<br>z:%{z}<br>m:%{text}<br>n:%{customdata}'), row=1,col=1)

现在如果我们想添加第三个自定义数据列表怎么办。棘手的部分来了。不能解析自定义数据中两个列表的列表，然后调用

customdata[0]

和

customdata[1]

，没那么简单。我们的第三个名单是

k=[2,4,6,8]

.

我们需要像这样的

customdata=[[[5],[2]],[[6],[4]],[[7],[6]],[[8],[8]]]

，它应该可以正常工作。基本上我们需要给 plotly 一个列表（或数组），其中每个元素都是你想要显示的所有点的列表。

fig.add_trace(go.Scatter3d(x=[0,1,2,3],y=[0,1,2,3],z=[0,1,2,3],
                          text=[9,8,7,6],customdata=[[[5],[2]],
                                                     [[6],[4]],
                                                     [[7],[6]],
                                                     [[8],[8]]],
                          hovertemplate='<br>x:%{x}<br>y:%{y}<br>z:%{z}<br>m:%{text}<br>n:%{customdata[0]}<br>k:%{customdata[1]}'), row=1,col=1)

我们快完成了，但还剩下一件事。像我们在 customdata 中给出的那样手动创建列表需要做很多工作，因此我们将使用强大的库将其自动化

import numpy as np

n = [5,6,7,8]
k = [2,4,6,8]

nk = np.empty(shape=(4,2,1), dtype='object')
nk[:,0] = np.array(n).reshape(-1,1)
nk[:,1] = np.array(k).reshape(-1,1)

fig.add_trace(go.Scatter3d(x=[0,1,2,3],y=[0,1,2,3],z=[0,1,2,3],
                          text=[9,8,7,6],customdata=nk,
                          hovertemplate='<br>x:%{x}<br>y:%{y}<br>z:%{z}<br>m:%{text}<br>n:%{customdata[0]}<br>k:%{customdata[1]}'), row=1,col=1)

轰！ 如果您想直接从数据帧添加数据，您可以解析

df['Column name']

代替

np.array(n)

。

Answer 3

您可以将自定义数据添加到悬停模板：

hovertemplate = 'Price: $%{customdata[0]:.2f}'+'<br>Week: %{customdata[1]} ' 
+ '<br>Change: %{customdata[2]}'

在哪里

customdata

可以是你的

group_dfff

或者你想从中获取悬停信息数据的其他一些完全不同的数据框。

这里是 plotly 文档的链接。

Answer 4

与上面类似，但我更喜欢一次性执行所有命令，一直使用 DataFrames，并坚持使用 Plotly 而不是 Plotly Express：

fig.add_trace(
    go.Scatter(
        x=group_dfff.Months,
        y=group_dfff.Amount,
        customdata=group_dfff.PERC_CHANGE,
        name=i,
        hovertemplate='<br>'.join([
            'Price: $%{y:.2f}',
            'Week: %{x}',
            'Percent Change: %{customdata}',
        ]),
    )
)

还请注意，如果您的 DataFrame 中有多个“自定义数据”字段（例如“A”和“B”），您希望将其包含在悬停数据中，您可以稍微修改以上内容以包含尽可能多的数据我喜欢：

fig.add_trace(
    go.Scatter(
        x=group_dfff.Months,
        y=group_dfff.Amount,
        customdata=group_dfff[['A', 'B']],
        name=i,
        hovertemplate='<br>'.join([
            'Price: $%{y:.2f}',
            'Week: %{x}',
            'Field A: %{customdata[0]}',
            'Field B: %{customdata[1]}',
        ]),
    )
)