实现动态使用div的全部高度/宽度的Plotly JS方法

Question

点击顶部按钮时，容器#myDiv的大小会发生变化。如何使得Plotly自动占用容器的所有可用空间，而不会有任何明显的延迟？

这里存在一些较高的延迟：

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: '', 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 = () => { 
    document.getElementById('myDiv').classList.toggle('size2');
    Plotly.Plots.resize('myDiv');
}

#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">点击这里改变大小</span>
<div id="myDiv"></div>
<div id="text">Hello world</div>

Answer 1

要使Plotly自动占用容器的所有可用空间，您可以在布局对象中使用 'autosize' 选项。

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
    }]
};