如何自定义悬停工具提示

Question

我有一个包含多条曲线的图，如附件所示。

var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.nameA',
        x: [1,2,3,4,5],
        y: [2.02825,1.63728,6.83839,4.8485,4.73463],
        showlegend: false
    },
    {
        x: [1,2,3,4,5],
        y: [3.02825,2.63728,4.83839,3.8485,1.73463],
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.different',
        showlegend: false
    },
    {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.unknown',
        x: [1,2,3,4,5],
        y: [5.02825,4.63728,3.83839,2.8485,0.73463],
        hovertemplate: '(%{x},%{y})',
        showlegend: false
    },

]; 

var layout = {
    title: "Set hover text with hovertemplate",
};

Plotly.newPlot('myDiv', data, layout);

https://codepen.io/mmakrzem/pen/mdOpWLd

每条曲线的名称都很长，所以我想自定义悬停模板，使其显示 (x,y) ...

对于我的示例，我希望看到类似 ...bel6.nameA 或 ...different 或 ...l6.unknown 的内容。而现在我得到所有图的 Main.app.fol...，所以我无法区分它们。我还尝试将 hovertemplate 设置为 (x,y)，但随后显示了整个名称，这太长了。

Answer 1

对于每条轨迹，您可以使用 customdata 参数添加要显示的字符串，并将其设置为与传递给每条轨迹的 x 和 y 数组长度相同的字符串数组 (例如，customdata: Array(5).fill('...nameA')).

然后您可以修改 hovertemplate 以包含 %{customdata} 并通过添加字符串 <extra></extra>.

完全隐藏长跟踪名称

您的悬停模板将如下所示：'%{x},%{y} %{customdata}<extra></extra>'

我的codepen是here如果你想看的话

var data = [
    {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.nameA',
        x: [1,2,3,4,5],
        y: [2.02825,1.63728,6.83839,4.8485,4.73463],
        customdata:Array(5).fill('...nameA'),
        hovertemplate: '%{x},%{y} %{customdata}<extra></extra>',
        showlegend: false
    },
    {
        x: [1,2,3,4,5],
        y: [3.02825,2.63728,4.83839,3.8485,1.73463],
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.different',
        customdata:Array(5).fill('...different'),
        hovertemplate: '%{x},%{y} %{customdata}<extra></extra>',
        showlegend: false
    },
  {
        type: 'scatter',
        mode: 'lines+markers',
        name: 'Main.app.folder.section31.floor17.room8.box56.label6.unknown',
        x: [1,2,3,4,5],
        y: [5.02825,4.63728,3.83839,2.8485,0.73463],
        customdata:Array(5).fill('...unknown'),
        hovertemplate: '%{x},%{y} %{customdata}<extra></extra>',
        showlegend: false
    },
  
];

var layout = {
    title: "Set hover text with hovertemplate",
};

Plotly.newPlot('myDiv', data, layout);

如何自定义悬停工具提示

how to customize hover tooltip

javascript

plotly

plotly.js