<p>点击顶部按钮时，容器<code>#myDiv</code>的大小会发生变化。如何使得Plotly自动占用容器的所有可用空间，<strong>而不会有任何明显的延迟</strong>？</p> <p>这里存在一些较高的延迟：</p> <p> <pre class="brush:js;toolbar:false;">var z = [], steps = [], i; for (i = 0; i &lt; 500; i++) z.push(Array.from({length: 600}, () =&gt; Math.floor(Math.random() * 100))); for (i = 0; i &lt; 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 = () =&gt; { document.getElementById('myDiv').classList.toggle('size2'); Plotly.Plots.resize('myDiv'); }</pre> <pre class="brush:css;toolbar:false;">#button { background-color: gray; } #myDiv { width: 500px; height: 300px; border: 2px solid black; } .size2 { width: 300px !important; height: 200px !important; }</pre> <pre class="brush:html;toolbar:false;">&lt;script src="https://cdn.plot.ly/plotly-2.16.2.min.js"&gt;&lt;/script&gt; &lt;span id="button"&gt;点击这里改变大小&lt;/span&gt; &lt;div id="myDiv"&gt;&lt;/div&gt; &lt;div id="text"&gt;Hello world&lt;/div&gt;</pre> </p>

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