如何使用Plotly.js在图片上绘制热力图并适配移动端？

嘿，我来帮你搞定这个需求！要在图片上叠加热力图同时做好移动端适配，咱们可以分步骤来实现：

基础实现：在图片上叠加热力图 #

Plotly.js支持直接在布局中添加背景图片，然后把热力图叠加在上面。核心是让热力图的坐标轴范围和图片的像素尺寸对应，确保位置精准对齐。

先看完整的基础实现代码：

<div id="heatmap-container"></div>

<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
<script>
// 你的示例热力图数据
var data = [
  {
    z: [[1, 20, 30], [20, 1, 60], [30, 60, 1], [782, 452, 29], [452, 128, 57]],
    type: 'heatmap',
    // 调整热力图透明度，避免完全遮挡背景图
    opacity: 0.6,
    colorscale: 'Viridis'
  }
];

// 配置布局：添加背景图片+对齐坐标轴
var layout = {
  // 设置背景图片
  images: [
    {
      source: '你的图片URL', // 替换成你的实际图片地址
      xref: 'x',
      yref: 'y',
      x: 0,
      y: 5, // 与热力图的行数对应（你的z数组有5行）
      sizex: 3, // 与热力图的列数对应（你的z数组有3列）
      sizey: 5,
      xanchor: 'left',
      yanchor: 'top',
      opacity: 1,
      layer: 'below' // 把图片放在热力图下层
    }
  ],
  // 让坐标轴范围和图片、热力图的尺寸匹配
  xaxis: {
    range: [0, 3],
    showgrid: false,
    zeroline: false,
    ticks: ''
  },
  yaxis: {
    range: [0, 5],
    showgrid: false,
    zeroline: false,
    ticks: ''
  },
  margin: { t: 0, b: 0, l: 0, r: 0 } // 去掉默认边距，节省空间
};

// 渲染图表
Plotly.newPlot('heatmap-container', data, layout);
</script>

这里要注意：

• 图片的sizex和sizey要和热力图的行列数（或实际图片像素比例）对应，我这里根据你的z数组（5行3列）设置了匹配范围。
• 通过opacity调整热力图透明度，既能看到背景图，又能清晰展示热力分布。
• 把图片的layer设为below，确保热力图在图片上方。

移动端适配核心优化 #

要让图表在移动端完美展示，重点要做好响应式布局和交互优化：

1. 给容器设置响应式样式 #

先给图表容器添加CSS，让它自动适配屏幕宽度：

#heatmap-container {
  width: 100%;
  max-width: 800px; /* 限制最大宽度，避免大屏上太宽 */
  margin: 0 auto;
  height: auto;
  aspect-ratio: 3/5; /* 匹配热力图和背景图的宽高比例（3列5行） */
}

用aspect-ratio可以保持图表宽高比，避免在不同屏幕上拉伸变形。

2. 开启Plotly的响应式模式 #

在渲染图表时添加responsive: true参数，让图表随容器大小自动调整：

Plotly.newPlot('heatmap-container', data, layout, { responsive: true });

3. 优化移动端交互细节 #

• 调整色条（colorbar）的位置和大小，避免小屏幕上占用过多空间：

  var data = [
    {
      z: [[1, 20, 30], [20, 1, 60], [30, 60, 1], [782, 452, 29], [452, 128, 57]],
      type: 'heatmap',
      opacity: 0.6,
      colorscale: 'Viridis',
      colorbar: {
        y: 0.5,
        yanchor: 'middle',
        len: 0.8, // 缩短色条长度
        thickness: 15 // 变窄色条宽度
      }
    }
  ];
  

• 设置hovermode: 'closest'，让移动端触摸时只显示最近的数据点信息，避免弹窗拥挤：

  var layout = {
    // ... 其他配置
    hovermode: 'closest'
  };
  

完整适配后的代码 #

把上面的优化整合起来，最终代码如下：

<!DOCTYPE html>
<html>
<head>
  <style>
    #heatmap-container {
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
      height: auto;
      aspect-ratio: 3/5;
    }
  </style>
</head>
<body>
  <div id="heatmap-container"></div>

  <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
  <script>
    var data = [
      {
        z: [[1, 20, 30], [20, 1, 60], [30, 60, 1], [782, 452, 29], [452, 128, 57]],
        type: 'heatmap',
        opacity: 0.6,
        colorscale: 'Viridis',
        colorbar: {
          y: 0.5,
          yanchor: 'middle',
          len: 0.8,
          thickness: 15
        }
      }
    ];

    var layout = {
      images: [
        {
          source: '你的图片URL',
          xref: 'x',
          yref: 'y',
          x: 0,
          y: 5,
          sizex: 3,
          sizey: 5,
          xanchor: 'left',
          yanchor: 'top',
          opacity: 1,
          layer: 'below'
        }
      ],
      xaxis: {
        range: [0, 3],
        showgrid: false,
        zeroline: false,
        ticks: ''
      },
      yaxis: {
        range: [0, 5],
        showgrid: false,
        zeroline: false,
        ticks: ''
      },
      margin: { t: 0, b: 0, l: 0, r: 0 },
      hovermode: 'closest'
    };

    Plotly.newPlot('heatmap-container', data, layout, { responsive: true });
  </script>
</body>
</html>

这样实现的热力图既能完美叠加在图片上，又能在手机等移动设备上自动适配屏幕，交互体验也更友好。

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