Kaedah Plotly JS untuk menggunakan ketinggian/lebar penuh div secara dinamik

Question

Apabila butang atas diklik, saiz bekas #myDiv Bagaimanakah saya boleh menjadikan Plotly secara automatik menduduki semua ruang yang ada dalam bekas,tanpa sebarang kelewatan yang ketara?

Terdapat beberapa kependaman yang lebih tinggi di sini:

var z = [], langkah = [], i;
untuk (i = 0; i < 500; i++)
    z.push(Array.from({panjang: 600}, () => Math.floor(Math.random() * 100)));
untuk (i = 0; i < 100; i++)
    steps.push({ label: i, kaedah: 'restyle', args: ['line.color', 'red']});
var data = [{z: z, colorscale: 'YlGnBu', type: 'heatmap'}];
susun atur var = {tajuk: '', peluncur: [{
    pad: {t: 5},
    len: 1,
    x: 0,
    nilai semasa: {xanchor: 'kanan', awalan: 'i: ', fon: {warna: '#888', saiz: 20}},
    langkah: langkah
  }]};
Plotly.newPlot('myDiv', data, susun atur);
document.getElementById('butang').onclick = () =>
    document.getElementById('myDiv').classList.toggle('size2');
    Plotly.Plots.resize('myDiv');
}

#button { background-color: grey }
#myDiv { lebar: 500px tinggi: 300px;
.saiz2 { lebar: 300px !penting;
<pre class="brush:html;toolbar:false;"><script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<span id="button">Klik di sini untuk menukar saiz</span>
<div id="myDiv"></div>
<div id="text">Hello world</div>

Answer 1

Untuk menjadikan Plotly secara automatik menduduki semua ruang bekas yang tersedia, anda boleh menggunakan pilihan 'autosize' dalam objek susun atur.

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