Plotly.js气泡图悬停显示原始sizdat值而非归一化值

核心思路是保留原始sizdat数组，通过Plotly的自定义悬停配置，让悬停时展示原始值，同时继续使用归一化后的数组控制气泡尺寸。

方法1：自定义完整悬停文本字符串 #

// 从Flask后端获取数据
fetch('/your-api-endpoint')
  .then(res => res.json())
  .then(data => {
    const xdat = data.xdat;
    const ydat = data.ydat;
    const sizdat = data.sizdat; // 保留原始尺寸数据
    
    // 归一化处理尺寸（你的现有逻辑）
    const min = Math.min(...sizdat);
    const max = Math.max(...sizdat);
    const sizdatNormalized = sizdat.map(val => (val - min) / (max - min) * 60 + 10); // 缩放至10-70的尺寸范围

    // 生成自定义悬停文本
    const hoverContent = xdat.map((x, idx) => 
      `X值: ${x}<br>Y值: ${ydat[idx]}<br>原始尺寸值: ${sizdat[idx]}`
    );

    // 配置Plotly trace
    const trace = {
      x: xdat,
      y: ydat,
      mode: 'markers',
      marker: { size: sizdatNormalized },
      text: hoverContent, // 绑定自定义文本
      hoverinfo: 'text' // 指定悬停时显示自定义text内容
    };

    Plotly.newPlot('your-chart-container', [trace], { title: '气泡图' });
  });

方法2：使用hovertemplate和customdata（更灵活） #

这种方式适合需要调整格式或复用数据的场景：

fetch('/your-api-endpoint')
  .then(res => res.json())
  .then(data => {
    const xdat = data.xdat;
    const ydat = data.ydat;
    const sizdat = data.sizdat;
    const sizdatNormalized = sizdat.map(val => (val - Math.min(...sizdat)) / (Math.max(...sizdat) - Math.min(...sizdat)) * 60 + 10);

    const trace = {
      x: xdat,
      y: ydat,
      mode: 'markers',
      marker: { size: sizdatNormalized },
      customdata: sizdat, // 存储原始尺寸数据
      hovertemplate: `X: %{x}<br>Y: %{y}<br>原始值: %{customdata}<extra></extra>`
      // <extra></extra> 用来隐藏默认的trace名称，可按需移除
    };

    Plotly.newPlot('your-chart-container', [trace], { title: '气泡图' });
  });

关键说明 #

• 必须保留从后端获取的原始sizdat数组，不能只处理归一化后的数据丢弃原始值；
• 两种方法都不会影响气泡的显示尺寸，因为marker.size依然使用归一化后的sizdatNormalized；
• 可根据需求调整悬停文本的格式（比如添加单位、调整数值精度）。

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