Plotly:在 hovertemplate 中包含附加数据

问题描述 投票:0回答:5

悬停模板= '大陆:%{df['大陆']}
'+ '国家:%{df['国家']}
'+ 'gdpPercap: %{x:,.4f}
'+ 'lifeExp: %{y}'+ ''

我正在尝试使用 hovertemplate 来自定义悬停信息。但是我无法让它显示我想要的东西。我正在让 x & y 正常工作。我不知道如何将其他字段添加到 hovertemplate。任何帮助将不胜感激。

import numpy as np
df = df[df['year'] == 1952]
customdata = np.stack((df['continent'], df['country']), axis=-1)
fig = go.Figure()
for i in df['continent'].unique():
    df_by_continent = df[df['continent'] == i]
    fig.add_trace(go.Scatter(x=df_by_continent['gdpPercap'], 
                         y=df_by_continent['lifeExp'],
                         mode='markers',
                         opacity=.7,
                         marker = {'size':15},
                         name=i,
                         hovertemplate=
                            'Continent: %{customdata[0]}<br>'+
                            'Country: %{customdata[1]}<br>'+
                            'gdpPercap: %{x:,.4f} <br>'+
                            'lifeExp: %{y}'+
                             '<extra></extra>',
                            ))
fig.update_layout(title="My Plot",
                 xaxis={'title':'GDP Per Cap',
                       'type':'log'},
                 yaxis={'title':'Life Expectancy'},
                )
fig.show()

更新了更多代码。第一个答案只是返回 comdata 的文本值。

python plotly
5个回答
9
投票

有关如何根据问题中包含的代码将

customdata
与多个跟踪一起使用的其他示例,请参见下文。请注意,您实际上需要将
customdata
添加到图形痕迹中才能在
hovertemplate
中使用它,这也显示在 Derek O 的答案中。

import numpy as np
import pandas as pd
import plotly.graph_objects as go

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminderDataFiveYear.csv')
df = df[df['year'] == 1952]

fig = go.Figure()

for continent in df['continent'].unique():

    df_by_continent = df[df['continent'] == continent]

    fig.add_trace(
        go.Scatter(
            x=df_by_continent['gdpPercap'],
            y=df_by_continent['lifeExp'],
            customdata=np.stack((df_by_continent['country'], df_by_continent['pop']), axis=-1),
            mode='markers',
            opacity=0.7,
            marker={'size': 15},
            name=continent,
            hovertemplate='<b>Country</b>: %{customdata[0]}<br>' +
                          '<b>Population</b>: %{customdata[1]:,.0f}<br>' +
                          '<b>GDP</b>: %{x:$,.4f}<br>' +
                          '<b>Life Expectancy</b>: %{y:,.2f} Years' +
                          '<extra></extra>',
        )
    )

fig.update_layout(
    xaxis={'title': 'GDP Per Cap', 'type': 'log'},
    yaxis={'title': 'Life Expectancy'},
)

fig.write_html('fig.html', auto_open=True)


8
投票

对于

{x}
字符串中除
{y}
hovertemplate
之外的任何其他变量,您需要创建一个名为
customdata
的变量,它是 DataFrame 列的 numpy 数组(在您的情况下为
df['continent'], df['country']
),并将
customdata=customdata
传递给
fig.update_layout
。这是@empet 在他的 Plotly 论坛回答here.

中建议的

你可以尝试这样的事情:

import numpy as np
import pandas as pd
import plotly.express as px

df = px.data.gapminder()

customdata = np.stack((df['continent'], df['country']), axis=-1)

fig = px.scatter(df, x="gdpPercap", y="lifeExp")

hovertemplate = ('Continent: %{customdata[0]}<br>' + 
    'Country: %{customdata[1]}<br>' + 
    'gdpPercap: %{x:,.4f} <br>' + 
    'lifeExp: %{y}' + 
    '<extra></extra>')

fig.update_traces(customdata=customdata, hovertemplate=hovertemplate)
fig.show()


1
投票

仅使用 pandas/python 的先前答案的变体:

customdata = list(df[['continent','country']].to_numpy())

然后像其他答案一样,使用引用 customdata 的模板组成你的图形。对于变体,这是一个使用 Scatter3D 并从数据框的两列添加数据的示例:

import plotly.graph_objects as go

customdata_set = list(df[['transaction','type']].to_numpy())

fig = go.Figure(
    data=[go.Scatter3d(x=df.time,
                       y=df.source,
                       z=df.dest,
                       hovertemplate='<i>Source:</i>: %{y:i}<br>' +
                       '<i>Destination:</i>: %{z:i}<br>' +
                       '<i>Amount:</i>: $%{text}<br>' +
                       '<i>Txn #:</i>: %{customdata[0]}<br>' +
                       '<i>Txn Type:</i>: %{customdata[1]}<br>' +
                       '<i>Date:</i>: %{x|%Y-%m-%d}',
                       text=(df.amount).to_numpy(),
                       customdata = customdata_set,
                       mode='markers',
                       marker=dict(
                            color=moat_sql.tx_amount,
                            size=4,
                            opacity=.8,
                            showscale=True,
                            colorscale='Viridis',
                            colorbar=dict(
                                title=dict(text='Log Txn Amount',
                                           side='bottom',
                                           font={'color': 'red'}
                                           )
                            )
    )
    )]
)

0
投票

您可以直接将格式化文本传递给

customdata + hovertemplate
参数,而不是使用
text
。我发现这更简单、更强大——例如,如果您不希望所有元素都使用完全相同的格式。

所以这确实有效:

text = your_df.map(
    lambda row: f'<i>Source:</i>: %{row.source:i}<br>' +
                    f'<i>Destination:</i>: %{row.z:i}<br>' +
                    f'<i>Amount:</i>: $%{row.amount}<br>' +
                    f'<i>Txn #:</i>: %{row.txn}<br>' +
                    f'<i>Txn Type:</i>: %{row.txn_type}<br>' +
                    f'<i>Date:</i>: %{row.date|%Y-%m-%d}',
    axis='columns'
)

go.Scatter3d(
   ...,
   text=text,
   ...
)

text
元素不支持完整的 HTML,但我看到它至少支持
<br>
<b>
标签。 它确实似乎支持
<h1>, <nbsp>, <hr>
标签。

我相信

hovertemplate
也是如此。


0
投票

这里有一个使用 Plotly.js 的 Javascript 示例,以防有人在寻找它。:

<!DOCTYPE html>
<html>
<head><script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script></head>
<body>
    <div id="myDiv" style="width: 100%; height: 100%; position: absolute;"></div>
    <script>
        // Define custom data
        const customData = [
            {
                x: [1, 2, 3],
                y: [4, 5, 6],
                z: ["Potate", "Banana", "Tomato"]
            }
        ];

        // Define custom hovertemplate
        const customHovertemplate = "X: %{x}<br>Y: %{y}<br>Z: %{customdata}";

        // Define trace using custom data and hovertemplate
        const trace = {
            x: customData[0].x,
            y: customData[0].y,
            customdata: customData[0].z,
            mode: "markers",
            marker: { color: "blue", size: 12 },
            type: "scatter",
            hovertemplate: customHovertemplate
        };

        Plotly.newPlot("myDiv", [trace]);
    </script>
</body>
</html>

© www.soinside.com 2019 - 2024. All rights reserved.