如何用Plotly.JS实现带透明度滑块的双热图叠加效果

实现要点 #

• 向data数组中添加第二个热图轨迹，用不同colorscale区分，同时设置初始透明度
• 修改滑块步骤的args参数，指定仅对第二个轨迹（索引为1）的透明度进行调节
• 优化滑块显示配置，增加当前值前缀提升可读性

完整实现代码 #

HTML部分

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="graph"></div>

JavaScript部分

// 生成第一个热图数据
const z1 = [];
for (let i = 0; i < 500; i++)
  z1.push(Array.from({ length: 600 }, () => Math.floor(Math.random() * 100)));

// 生成第二个热图数据
const z2 = [];
for (let i = 0; i < 500; i++)
  z2.push(Array.from({ length: 600 }, () => Math.floor(Math.random() * 100)));

// 配置两个热图轨迹
const data = [
  { z: z1, colorscale: "YlGnBu", type: "heatmap", opacity: 1 }, // 第一个热图，透明度固定为1
  { z: z2, colorscale: "RdBu", type: "heatmap", opacity: 0.5 }  // 第二个热图，初始透明度0.5
];

// 生成滑块步骤
const steps = [];
for (let i = 0; i <= 100; i++) {
  steps.push({
    label: `${i}%`,
    execute: true,
    method: "restyle",
    args: [{ opacity: i / 100 }, [1]] // 仅对索引为1的轨迹（第二个热图）生效
  });
}

// 配置布局，添加滑块
const layout = {
  sliders: [{
    active: 50,
    currentvalue: { prefix: "第二个热图透明度: " },
    steps: steps
  }]
};

// 渲染图表
Plotly.newPlot("graph", data, layout);

关键说明 #

• 两个热图通过data数组顺序添加，Plotly会按顺序叠加显示
• 滑块的args第二个参数[1]指定透明度调节仅作用于第二个轨迹，第一个热图透明度保持1不变
• 可修改colorscale、初始opacity等参数自定义热图样式

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