如何让Plotly图表自适应HTML页面中的div容器尺寸

Plotly导出的独立HTML文件默认会给图表容器设置固定像素宽高，且默认关闭响应式渲染逻辑。即使外层iframe设置了width: 100%; height: 100%，iframe内部加载的图表本身不会跟随iframe视口尺寸变化，因此始终保持固定大小、溢出容器。

优先选以下两种方案，不需要改动原有Python生成逻辑：

• 方案1：CSS缩放适配（无需修改Plotly导出的HTML文件，成本最低）
  核心逻辑是监听容器尺寸变化，按比例缩放iframe，让固定尺寸的图表刚好填满父容器。
  首先修改原有页面的CSS样式：

  * {
    box-sizing: border-box;
  }
  .column {
    float: left;
    width: 50%;
    padding: 10px;
    height: 300px;
  }
  /* 给图表所在列加相对定位和溢出隐藏 */
  .column:first-child {
    position: relative;
    overflow: hidden;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  #igraph {
    border: none;
    transform-origin: top left;
    position: absolute;
    display: block;
  }
  

  然后在页面</body>标签前加入以下JS代码，注意把plotDefaultWidth和plotDefaultHeight的值替换成你打开report_graph_2.html后看到的图表固定宽高（Plotly默认导出尺寸一般为700px宽、450px高）：

  <script>
  const iframe = document.getElementById('igraph');
  // 替换为Plotly文件内图表的实际固定宽高
  const plotDefaultWidth = 700;
  const plotDefaultHeight = 450;
  
  function resizePlot() {
    const container = iframe.parentElement;
    const containerW = container.clientWidth;
    const containerH = container.clientHeight;
    const scale = Math.min(containerW / plotDefaultWidth, containerH / plotDefaultHeight);
    iframe.style.width = `${plotDefaultWidth}px`;
    iframe.style.height = `${plotDefaultHeight}px`;
    iframe.style.transform = `scale(${scale})`;
    // 让图表在容器内居中
    iframe.style.left = `${(containerW - plotDefaultWidth * scale) / 2}px`;
    iframe.style.top = `${(containerH - plotDefaultHeight * scale) / 2}px`;
  }
  iframe.addEventListener('load', resizePlot);
  window.addEventListener('resize', resizePlot);
  </script>
  

• 方案2：修改导出的Plotly HTML文件（适配效果最流畅）
  直接打开report_graph_2.html做三处修改，改完后原有iframe的100%宽高设置就能生效：

  1. 给页面的<html>和<body>标签加上样式：style="width: 100%; height: 100%; margin: 0; padding: 0;"
  2. 找到图表容器div（class为js-plotly-plot的元素），把它style属性里写死的width、height像素值改成width: 100%; height: 100%;
  3. 找到页面里Plotly.newPlot或者Plotly.react的调用代码，在配置项里加上responsive: true

后续生成Plotly图表时，直接在导出环节开启响应式配置，就不需要额外做HTML层面的适配：

• 导出HTML时不要传固定的width、height参数，同时指定默认宽高为100%、开启响应式：

  fig.write_html(
      "report_graph_2.html",
      config={"responsive": True},
      default_width="100%",
      default_height="100%",
      # 可选：用CDN加载plotly.js减小文件体积
      include_plotlyjs="cdn"
  )
  

• 额外给图表布局设置自适应属性，避免边距异常：

  fig.update_layout(
      autosize=True,
      margin=dict(l=20, r=20, t=30, b=20)
  )
  

  按以上参数导出的HTML本身自带响应式能力，外层iframe只要设置width:100%;height:100%就能自动适配父容器尺寸，窗口缩放时也会自动重绘。

注意：如果iframe加载的Plotly文件属于跨域资源，方案1依然可以正常使用，方案2需要你有权限修改Plotly对应的HTML文件才能生效。

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