悬停模板=
'大陆:%{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 的文本值。
有关如何根据问题中包含的代码将
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)
对于
{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()
仅使用 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'}
)
)
)
)]
)
您可以直接将格式化文本传递给
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
也是如此。
这里有一个使用 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>