如何让Plotly JS动态适配Div容器尺寸且无硬编码与延迟？

当点击按钮切换容器#myDiv的尺寸时，直接调用Plotly.Plots.resize()会出现明显延迟，尤其在图表数据量较大时（比如示例中的500×600热力图）。以下是优化方案：

核心问题分析 #

原代码中切换容器样式后立即执行resize，但浏览器需要时间完成DOM尺寸重绘，此时Plotly可能基于旧尺寸计算，或与DOM重绘操作并行导致卡顿。

优化方案1：用requestAnimationFrame确保DOM重绘后执行resize #

将resize操作放入requestAnimationFrame回调，确保在浏览器完成容器尺寸更新后再触发图表重绘：

var z = [], steps = [], i;
for (i = 0; i < 500; i++) 
    z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100)));  
for (i = 0; i < 100; i++)
    steps.push({ label: i, method: 'restyle', args: ['line.color', 'red']});
var data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}];
var layout = {
    title: '', 
    autosize: true, // 明确开启自动适配容器
    sliders: [{
        pad: {t: 5},
        len: 1,
        x: 0,
        currentvalue: {xanchor: 'right', prefix: 'i: ', font: {color: '#888', size: 20}},
        steps: steps
    }]
};
Plotly.newPlot('myDiv', data, layout);

document.getElementById('button').onclick = () => { 
    const div = document.getElementById('myDiv');
    div.classList.toggle('size2');
    // 等待DOM重绘完成后执行resize
    requestAnimationFrame(() => {
        Plotly.Plots.resize(div);
    });
}

优化方案2：用ResizeObserver自动监听容器尺寸变化 #

通过ResizeObserver监听容器的尺寸变化，自动触发图表resize，无需手动在点击事件中调用：

var z = [], steps = [], i;
for (i = 0; i < 500; i++) 
    z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100)));  
for (i = 0; i < 100; i++)
    steps.push({ label: i, method: 'restyle', args: ['line.color', 'red']});
var data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}];
var layout = {
    title: '', 
    autosize: true,
    sliders: [{
        pad: {t: 5},
        len: 1,
        x: 0,
        currentvalue: {xanchor: 'right', prefix: 'i: ', font: {color: '#888', size: 20}},
        steps: steps
    }]
};
const div = document.getElementById('myDiv');
Plotly.newPlot(div, data, layout);

// 监听容器尺寸变化，自动触发resize
const resizeObserver = new ResizeObserver(() => {
    Plotly.Plots.resize(div);
});
resizeObserver.observe(div);

document.getElementById('button').onclick = () => { 
    div.classList.toggle('size2');
}

配套CSS与HTML（无需修改） #

#button { background-color: gray; }
#myDiv { width: 500px; height: 300px; border: 2px solid black; }
.size2 { width: 300px !important; height: 200px !important; }

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<span id="button">Click here to change the size</span>
<div id="myDiv"></div>
<div id="text">Hello world</div>

效果说明 #

两种方案都能确保图表在容器尺寸变化后无延迟地占满可用空间：

• 方案1适合简单的尺寸切换场景，轻量且直接；
• 方案2更通用，能处理任何导致容器尺寸变化的操作（比如窗口 resize、父容器尺寸变化等）。

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