Plotly JS能否在坐标轴上显示悬停信息？OHLC图表场景求助

Plotly JS本身没有原生支持直接在坐标轴刻度上显示悬停信息，但可以通过自定义隐藏跟踪+悬停配置模拟出你要的效果，而且完全适配OHLC图表场景，不会产生冲突。

实现思路 #

核心是添加一个不可见的散点跟踪（trace），将其数据点绑定到坐标轴刻度位置，利用这个跟踪的悬停信息来模拟坐标轴刻度的悬停提示，具体步骤如下：

1. 添加隐藏的散点跟踪
   创建一个散点trace，把数据点的x坐标对应到OHLC图表的x轴刻度（比如日期），y坐标设为图表y轴的最小值（确保点落在坐标轴附近），然后设置标记大小为0隐藏点，同时配置悬停文本和样式。

2. 自定义悬停样式
   通过hoverlabel属性设置悬停框的背景色、字体颜色，完全匹配你需要的黑色背景+白色文字效果。

代码示例（OHLC场景） #

// 示例OHLC数据
const ohlcTrace = {
  x: ['1977-01-01', '1977-02-01', '1977-03-01'],
  open: [30, 32, 31],
  high: [35, 34, 36],
  low: [28, 30, 29],
  close: [33, 31, 34],
  type: 'ohlc',
  name: 'OHLC Data'
};

// 用于坐标轴悬停的隐藏散点跟踪
const axisHoverTrace = {
  x: ohlcTrace.x,
  // 将y值绑定到OHLC数据的最低价格，确保点靠近x轴
  y: Array(ohlcTrace.x.length).fill(Math.min(...ohlcTrace.low)),
  mode: 'markers',
  marker: { size: 0 }, // 隐藏标记点
  hoverinfo: 'text',
  // 提取年份作为悬停文本，可根据需求自定义内容
  text: ohlcTrace.x.map(date => new Date(date).getFullYear()),
  hoverlabel: {
    bgcolor: 'black',
    font: { color: 'white', size: 12 },
    bordercolor: 'black'
  }
};

// 图表布局
const layout = {
  xaxis: { title: '日期' },
  yaxis: { title: '价格' },
  hovermode: 'closest' // 确保悬停时触发最近的点
};

// 渲染图表
Plotly.newPlot('ohlcChart', [ohlcTrace, axisHoverTrace], layout);

补充说明 #

• 如果你的x轴是连续数值型（比如直接用年份数字），只需将axisHoverTrace.x替换为x轴的tickvals数组即可，逻辑完全一致。
• 这个方法不会影响OHLC图表的原生交互（比如K线的悬停信息），两种悬停提示会独立触发。
• 若需要更精准的位置控制，可以调整axisHoverTrace.y的值，或者通过布局配置调整x轴的边距。

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