如何修改Plotly.js中悬浮提示框的标签？

这个问题我之前也踩过坑！Plotly.js里的轴标题和hover提示框里的标签是完全独立的配置项：轴标题只是用来显示在坐标轴上方/左侧的文本，而hover提示框默认会用trace数据里的字段名（比如默认的x、y）来做标签，不会自动同步轴标题的内容。

两种可行的解决方法： #

1. 为每个Trace自定义hovertemplate

这是最直接的方式，你可以完全控制hover提示框里显示的内容，包括替换默认的x/y标签为你的轴标题。

示例代码：

var data = [
  {
    x: [1, 2, 3],
    y: [4, 5, 6],
    type: 'scatter',
    // 自定义hover模板，把默认的x换成你的轴标题"hellox"
    hovertemplate: 'hellox: %{x}<br>helloy: %{y}<extra></extra>'
  }
];

var layout = {
  xaxis: { title: 'hellox' },
  yaxis: { title: 'helloy' }
};

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

• %{x}和%{y}会自动替换成对应的数据值
• <extra></extra>用来隐藏默认的trace名称，如果需要保留trace名称，可以去掉这部分

2. 统一配置全局hover模板（适合多trace场景）

如果你的图表有多个trace，不想逐个设置hovertemplate，可以通过定义轴标题变量来复用配置，保证hover标签和轴标题同步：

const xAxisTitle = 'hellox';
const yAxisTitle = 'helloy';

var data = [
  {
    x: [1, 2, 3],
    y: [4, 5, 6],
    type: 'scatter',
    hovertemplate: `${xAxisTitle}: %{x}<br>${yAxisTitle}: %{y}<extra></extra>`
  },
  {
    x: [1, 3, 5],
    y: [2, 4, 6],
    type: 'scatter',
    hovertemplate: `${xAxisTitle}: %{x}<br>${yAxisTitle}: %{y}<extra></extra>`
  }
];

var layout = {
  xaxis: { title: xAxisTitle },
  yaxis: { title: yAxisTitle }
};

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

这样就能轻松保证hover提示框里的标签和轴标题完全一致了。

内容的提问来源于stack exchange，提问作者Alexandre Dubé