如何让Plotly图表随父容器尺寸自适应且保持高帧率？

当调整父div尺寸时，图片会自动适配。如何让Plotly图表实现类似的自适应行为，同时保持高帧率？

初始示例代码 #

JavaScript #

Plotly.newPlot('myDiv', [{x: [1, 2, 3, 4], y: [10, 15, 13, 17], mode: 'markers'}], {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}});

CSS #

#a, #b { border: 1px solid black; resize: both; overflow: auto; height: 150px; width: 150px; }
#a img { width: 100%; }

HTML #

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<div id="a"><img src="https://picsum.photos/id/240/200"></div>
<div id="b"><div id="myDiv"></div></div>

编辑补充：大型图表卡顿问题 #

现有基于ResizeSensor的方案在处理大型图表时会出现卡顿，示例如下：

JavaScript #

var z = [];
for (var i = 0; i < 500; i++) 
    z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100)));  
var data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}];
Plotly.newPlot('b', data, {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}});
function fixer() {
    el = document.getElementById('b');
    Plotly.newPlot(el, el.data, el.layout, {responsive: true});
}
setTimeout(function() {
    el = document.getElementById('b');
    new ResizeSensor(el, fixer)
}, 200);

CSS #

#a, #b { 
border: 1px solid black; 
resize: both; 
overflow: auto;
height: 150px; 
width: 150px; }
#a img { width: 100%; }

HTML #

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/1.2.3/ResizeSensor.js"></script>
<div id="a"><img src="https://picsum.photos/id/240/200"></div>
<div id="b" onresize=fixer></div>

注：有演示视频展示卡顿现象

优化方案：实现流畅自适应的Plotly图表 #

1. 防抖处理+内置responsive配置 #

直接在resize事件中触发重绘会因调用过于频繁导致卡顿，用防抖函数控制重绘频率，配合Plotly内置的responsive配置：

// 防抖函数：控制事件触发间隔
function debounce(func, wait) {
    let timeout;
    return function(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 初始化大型热力图
const z = [];
for (let i = 0; i < 500; i++) 
    z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100)));  
const data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}];
const layout = {margin: {l: 50, r: 50, b: 50, t: 50, pad: 4}};
// 开启responsive模式
Plotly.newPlot('b', data, layout, {responsive: true});

// 防抖后的重绘逻辑
const debouncedResize = debounce(() => {
    Plotly.relayout('b', {width: '100%', height: '100%'});
}, 100); // 100ms间隔，可根据需求调整

// 监听容器尺寸变化
new ResizeSensor(document.getElementById('b'), debouncedResize);

2. 用relayout替代newPlot #

原方案每次resize调用newPlot会完全重建图表，开销极大。改用Plotly.relayout仅调整布局参数，避免全量渲染：

• relayout仅更新布局属性，不重新处理数据层
• 配合responsive: true，Plotly会自动适配容器尺寸

3. 大型图表额外优化 #

• 使用WebGL渲染：将heatmap替换为heatmapgl，利用GPU加速大幅提升渲染性能：

  const data = [{z: z, colorscale: 'YlGnBu', type: 'heatmapgl'}];
  

• 数据降采样：对超大规模数据做抽样或聚合，减少渲染压力
• 关闭非必需交互：禁用hover提示、拖拽缩放等非核心交互，降低实时计算开销

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