如何在Plotly JavaScript中分离X/Y轴hoverlabel并固定X轴hoverlabel于底部

Plotly默认的hover提示绑定在数据点上，无法直接通过配置分离X/Y轴的hoverlabel，但可以通过自定义hover模板+事件监听动态添加注解实现需求：

实现步骤 #

• 给Y轴数据配置hovertemplate，只展示Y轴相关内容，屏蔽默认的X轴信息
• 监听plotly_hover事件，在图表底部生成固定位置的X轴注解
• 监听plotly_unhover事件，移除底部的X轴注解

修改后的完整代码 #

// 模拟测试数据
const testX = ['2024-01-01', '2024-01-02', '2024-01-03', '2024-01-04'];
const testY = [400, 410, 395, 405];

var data = [
  {
    type: 'scatter',
    x: testX,
    y: testY,
    line: {                             
      width: 2,
      color: '#D2AB67'
    },
    // 自定义Y轴hover模板，只显示Y值，隐藏默认X信息
    hovertemplate: 'Kurs złota: %{y} PLN/1oz<extra></extra>'
  }
];

var layout = {
  plot_bgcolor: '#F7F8FA',
  paper_bgcolor: '#F7F8FA',
  showlegend: false,
  yaxis: {
    title: 'Kurs złota PLN/1oz',
    showgrid: false,
    linecolor: 'black',
    linewidth: 1,
    mirror: true
  },
  xaxis: {
    showgrid: false,
    linecolor: 'black',
    linewidth: 1,
    mirror: true
  },
  // 预留底部空间给X轴hoverlabel
  margin: {
    bottom: 60
  }
};

// 初始化图表
const myDiv = document.getElementById('myDiv');
Plotly.newPlot(myDiv, data, layout, {displayModeBar: false});

// 存储底部注解的ID，用于移除
let bottomHoverAnnotationId = null;

// 监听hover事件，添加底部X轴hoverlabel
myDiv.on('plotly_hover', function(data) {
  // 获取当前悬停的X值
  const xValue = data.points[0].x;
  
  // 先移除已有的注解
  if (bottomHoverAnnotationId) {
    Plotly.relayout(myDiv, {
      'annotations[' + bottomHoverAnnotationId + ']': null
    });
  }
  
  // 添加底部固定的注解
  const annotation = {
    x: 0.5, // 水平居中
    y: 0, // 紧贴底部
    xref: 'paper', // 基于图表容器定位
    yref: 'paper',
    text: `<b>${xValue}</b>`,
    showarrow: false,
    font: {
      size: 12,
      color: '#fff'
    },
    bgcolor: '#333',
    bordercolor: '#333',
    borderwidth: 1,
    xanchor: 'center',
    yanchor: 'top'
  };
  
  Plotly.relayout(myDiv, {
    annotations: [annotation]
  });
  
  // 记录注解ID
  bottomHoverAnnotationId = 0;
});

// 监听unhover事件，移除底部注解
myDiv.on('plotly_unhover', function() {
  if (bottomHoverAnnotationId) {
    Plotly.relayout(myDiv, {
      'annotations[' + bottomHoverAnnotationId + ']': null
    });
    bottomHoverAnnotationId = null;
  }
});

代码说明 #

1. hovertemplate配置：通过<extra></extra>清空默认的额外信息，只保留Y轴数据，实现Y轴hoverlabel独立显示
2. 底部注解定位：使用xref: 'paper'和yref: 'paper'基于图表容器定位，确保注解始终固定在底部居中位置
3. 事件监听：通过plotly_hover和plotly_unhover动态添加/移除注解，模拟X轴hoverlabel的效果
4. margin调整：增加底部margin避免注解被X轴标签遮挡

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