如何在Plotly.js图表的图例（或图例键）下方添加按钮？

要把按钮精准定位在图例（或图例键）下方，最可靠的方式是动态获取图例的DOM位置，用JavaScript设置按钮的绝对定位，这样即使图表大小变化、图例位置调整，按钮也能跟着同步移动。以下是具体实现步骤：

步骤1：调整HTML结构，统一容器管理 #

把按钮和图表放在同一个相对定位的容器中，方便我们基于图表容器计算按钮的绝对位置：

<div id="chart-container" style="position: relative;">
  <div id="myDiv"></div>
  <div id="inset">
    <button style="background:grey;">Target<br/>Info</button>
  </div>
</div>

步骤2：添加基础CSS样式 #

给按钮容器设置绝对定位，后续通过JS动态填充具体的位置参数：

#inset {
  position: absolute;
  margin-top: 8px; /* 可选：给按钮和图例之间加一点间距，让布局更美观 */
}

步骤3：用JavaScript动态定位按钮 #

在Plotly图表渲染完成后，获取图例的实时位置信息，计算按钮的坐标并设置：

// 假设你已经定义好图表的data和layout（和你示例中的配置一致）
const data = [/* 你的图表数据集 */];
const layout = {
  legend: {
    // 可以自定义图例初始位置，比如左上角
    x: 0,
    y: 1
  }
};

// 渲染图表并在完成后执行定位逻辑
Plotly.newPlot('myDiv', data, layout).then(() => {
  const legend = document.querySelector('#myDiv .legend');
  const inset = document.getElementById('inset');
  const container = document.getElementById('chart-container');
  
  // 获取元素的位置和尺寸信息
  const legendRect = legend.getBoundingClientRect();
  const containerRect = container.getBoundingClientRect();
  
  // 设置按钮位置：水平对齐图例左侧，垂直紧跟图例下方
  inset.style.left = `${legendRect.left - containerRect.left}px`;
  inset.style.top = `${legendRect.bottom - containerRect.top}px`;
  
  // 监听窗口 resize，确保图表缩放时按钮位置同步更新
  window.addEventListener('resize', () => {
    const updatedLegendRect = legend.getBoundingClientRect();
    inset.style.left = `${updatedLegendRect.left - containerRect.left}px`;
    inset.style.top = `${updatedLegendRect.bottom - containerRect.top}px`;
  });
});

为什么不直接用固定margin？ #

你原来使用的margin-left:80px是固定值，当图表容器大小变化、图例因响应式布局自动调整位置时，按钮很容易和图例错位。而动态获取DOM位置的方式能自适应这些变化，保证按钮始终精准对齐图例下方。

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