Plotly 悬浮提示（hovertemplate）设置

花花木较瘦

2024-06-17 456 阅读1分钟

问题描述

Plotly画图时，设置的name字段如果太长，就会自动省略，如下图，试了好几种方式，自定义HTML，设置hoverinfo: 'text',效果都不太好，最后发现hovertemplate这个属性可以满足

 {
    x: integratedData.map(data => data.K),
    y: integratedData.map(data => data.IV),
    type: 'scatter',
    mode: 'lines+markers',
    name: `${Contract.split('_')[1]}-${Contract.split('_')[2]}-保证金融券a_iv`,
    hovertemplate: `%{y}`,
    line: { color: color, dash: 'Dot' }
},

hovertemplate属性

在 Plotly 中，hovertemplate 属性用于自定义鼠标悬浮在数据点上时显示的提示信息。与默认的 hoverinfo 属性不同，hovertemplate 允许更细粒度地控制显示内容和格式。它支持使用特定的占位符插入数据值，并通过 HTML 标记进行格式化。

占位符

hovertemplate 支持以下常用占位符，用于插入不同的数据信息：

%{x}：插入数据点的 x 值。
%{y}：插入数据点的 y 值。
%{z}：插入数据点的 z 值（适用于 3D 图表）。
%{text}：插入数据点的自定义文本（如果有）。
%{meta}：插入与数据点相关的元数据。
%{fullData.name}：插入数据集的名称。

格式化选项

在占位符中可以使用格式化选项来控制数值的显示格式。例如：

%{y:.2f}：将 y 值格式化为保留两位小数。
%{x:.0%}：将 x 值格式化为百分比，保留零位小数。

HTML 标记

可以在 hovertemplate 中使用 HTML 标记来控制文本样式和布局：

<b></b>：将文本加粗。
<i></i>：将文本变为斜体。
<br>：插入换行符。
<extra></extra>：移除多余的默认信息。