Plotly图表重绘后逐次缩小问题求助（含报错信息）

问题现象 #

每次重绘图表（用户点击生成按钮或更新输入数据后生成新图表），图表会逐次缩小约10%。效果如下：

环境与兼容性 #

• 技术栈：Next.js v13.5.6、React v18.2.0、react-plotly.js v2.6.0
• 问题出现场景：Firefox v120.0.1（全平台）、Chrome v87.0.4280；Chrome v120.0.6099无此问题
• 实现流程：Plotly.py生成图表→转JSON发送前端→在MUI v5标签页内通过react-plotly.js的Plot组件展示

前端代码示例 #

'use client';
import React, { useState, useEffect, useCallback } from 'react';
import dynamic from 'next/dynamic';

import { PlotData, Layout } from 'plotly.js';
// TODO: Plotly and NextJS don't place nice,
// TODO: so run a dynamic import which takes a couple seconds to load
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });
import { BARE_PLOT_LAYOUT, PLOT_CONFIG } from '../utils/plotUtils';

export default function SummaryPlot() {
  const [plotData, setPlotData] = useState<PlotData[]>([]);
  const [plotLayout, setPlotLayout] =
    useState<Partial<Layout>>(BARE_PLOT_LAYOUT);

  //Implementation details {
  ...
  }

  return (
    <>
      <Plot
        data={plotData}
        layout={plotLayout}
        config={PLOT_CONFIG}
        useResizeHandler={true}
        style={{ width: '100%', height: '100%' }}
      />
    </>
  );
}

报错信息 #

console.trace() WARN: Too many auto-margin redraws. 5 plotly.js:27692
    warn plotly.js:27692
    doAutoMargin plotly.js:57862
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    call plotly.js:63079
    doAutoMargin plotly.js:57859
    syncOrAsync plotly.js:26542
    _doPlot plotly.js:31811
    syncOrAsync plotly.js:26542
    react plotly.js:34002
    p factory.js:89

解决方法 #

1. 关闭自动边距计算，固定边距 #

报错核心是自动边距计算陷入循环重绘。直接在布局中设置固定边距，关闭自动调整：

// 修改plotUtils中的BARE_PLOT_LAYOUT
export const BARE_PLOT_LAYOUT = {
  margin: { l: 60, r: 40, t: 50, b: 60 }, // 按需调整数值
  autosize: false,
  width: '100%',
  height: '100%'
};

2. 强制Plot组件重新挂载 #

给Plot组件添加唯一key，每次数据更新时重置key，避免组件在原有尺寸基础上重复调整：

// 在SummaryPlot组件中添加key状态
const [plotKey, setPlotKey] = useState(0);

// 数据更新时重置key
useEffect(() => {
  setPlotKey(prev => prev + 1);
}, [plotData, plotLayout]);

// 给Plot组件绑定key
<Plot
  key={plotKey}
  data={plotData}
  layout={plotLayout}
  config={PLOT_CONFIG}
  useResizeHandler={true}
  style={{ width: '100%', height: '100%' }}
/>

3. 调整Resize处理逻辑 #

禁用useResizeHandler，手动控制图表尺寸，避免和MUI标签页的尺寸变化冲突：

<Plot
  data={plotData}
  layout={plotLayout}
  config={PLOT_CONFIG}
  useResizeHandler={false}
  style={{ width: '100%', height: '100%' }}
/>

如果需要响应窗口变化，可以手动监听并触发resize：

const plotRef = useRef<any>(null);

useEffect(() => {
  const handleResize = () => {
    plotRef.current?.resize();
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

// 给Plot添加ref
<Plot
  ref={plotRef}
  // ...其他属性
/>

4. 更新依赖版本 #

尝试升级react-plotly.js到最新稳定版，或降级至v2.5.x等已知无此问题的版本，修复浏览器兼容性bug。

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