Plotly图表悬停时替换缩放后Volume的实际值问题

针对你遇到的问题，有两种可行的解决方法，优先推荐第一种更简洁的方式：

方法1：通过Trace的customdata和hovertemplate直接配置（推荐） #

这种方法无需额外监听hover事件，直接在定义成交量Trace时传入实际数据并指定悬停模板，让Plotly自动显示正确值。

修改后的Trace代码： #

const barTrace = {
    x: {{vol_x | safe}},
    y: {{vol_y | safe}}, // 缩放后的成交量数值
    customdata: {{actual_volume | safe}}, // 传入**实际成交量数组**（需Flask后端传递此变量）
    type: 'scatter',
    mode: 'lines',
    name: 'Volume',
    marker: {
      color: 'rgba(255, 0, 0, 0.3)'
    },
    hovertemplate: 'Volume: %{customdata}<extra></extra>'
};
data.push(barTrace);

说明： #

• customdata字段存储每个数据点对应的实际成交量值，需要在Flask后端将实际成交量数组赋值给actual_volume变量。
• hovertemplate定义悬停提示格式，%{customdata}会自动替换为对应点的实际成交量，<extra></extra>用于隐藏默认的冗余信息。

方法2：监听plotly_hover事件修改DOM元素 #

如果不想调整Trace配置，可以在已有的hover事件中直接修改Plotly生成的悬停提示框内容：

修改后的事件监听代码： #

document.getElementById('graph').on('plotly_hover', function(data){
  data.points.forEach(function(hoverData){
    const traceName = hoverData.data.name;
    if (traceName === 'Volume') {
      const reference = {{ vol_reference | safe }};
      const displayedValue = reference[hoverData.y];
      
      // 定位Plotly悬停提示框
      const hoverBox = document.querySelector('.plotly-hover');
      if (!hoverBox) return;
      
      // 找到Volume对应的文本行并替换数值
      const textLines = hoverBox.querySelectorAll('div');
      textLines.forEach(line => {
        if (line.textContent.includes(traceName)) {
          line.textContent = `${traceName}: ${displayedValue}`;
        }
      });
    }
  })
});

说明： #

• Plotly悬停提示框默认带有plotly-hover类名，通过此类名定位元素。
• 遍历提示框内的文本行，找到包含"Volume"的行并替换数值为实际成交量。
• 注意：此方法依赖Plotly的DOM结构，若版本更新后DOM结构变化需调整选择器。

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