Plotly.js叠加X轴时间序列图：hovermode无法显示全部数据

我需要用Plotly.js创建带有叠加X轴的时间序列图，要求悬浮提示框同时展示两个X轴对应的数据，但当前仅显示第二个轴的数据。使用hovermode: 'closest'无法满足需求，因为它仅展示单个点的信息，无法实现同一X轴上所有项的对比。

当前布局配置代码如下：

layout: {
  showlegend: true,
  title: { text: 'Value vs time', y: 0.975 },
  hovermode: 'x unified',
  xaxis: { title: 'time' },
  yaxis: { title: 'Value' },
  xaxis2: { title: 'Prior Period', overlaying: 'x', side: 'top' },
},

问题截图：

有最小可复现示例用于测试调试。

解决方法 #

1. 为每个数据系列绑定对应X轴
   在定义每个trace时，通过xaxis属性明确指定其所属的X轴：xaxis: 'x'对应底部X轴，xaxis: 'x2'对应顶部X轴。这样Plotly能准确识别各数据系列与X轴的关联关系。

2. 保留统一悬浮模式并自定义提示框（可选）
   保持hovermode: 'x unified'配置，同时可通过hovertemplate自定义每个trace的提示框内容，确保两个X轴的信息都能展示。

示例代码：

// 底部X轴数据系列
const trace1 = {
  x: ['2024-01-01', '2024-01-02'],
  y: [10, 20],
  type: 'scatter',
  xaxis: 'x',
  hovertemplate: '时间: %{x}<br>数值: %{y}<extra></extra>'
};

// 顶部X轴数据系列
const trace2 = {
  x: ['2023-01-01', '2023-01-02'],
  y: [15, 25],
  type: 'scatter',
  xaxis: 'x2',
  hovertemplate: '上期时间: %{x}<br>数值: %{y}<extra></extra>'
};

const layout = {
  showlegend: true,
  title: { text: '数值 vs 时间', y: 0.975 },
  hovermode: 'x unified',
  xaxis: { title: '时间' },
  yaxis: { title: '数值' },
  xaxis2: { title: '上期时间', overlaying: 'x', side: 'top' },
};

Plotly.newPlot('myDiv', [trace1, trace2], layout);

通过上述配置，悬浮时提示框会同时展示两个X轴对应的数据点信息，满足对比需求。

内容的提问来源于stack exchange，提问作者Woolynik