Méthode Plotly JS pour utiliser dynamiquement toute la hauteur/largeur d'un div

Question

Lorsque vous cliquez sur le bouton du haut, la taille du conteneur #myDiv Comment puis-je faire en sorte que Plotly occupe automatiquement tout l'espace disponible dans un conteneur, sans aucun délai notable  ?

Il y a une latence plus élevée ici :

var z = [], étapes = [], i;
pour (i = 0; i < 500; i++)
    z.push(Array.from({longueur : 600}, () => Math.floor(Math.random() * 100)));
pour (i = 0; i < 100; i++)
    steps.push({ label : i, méthode : 'restyle', args : ['line.color', 'red']});
var data = [{z : z, échelle de couleurs : 'YlGnBu', type : 'heatmap'}] ;
var layout = {titre : ', curseurs : [{
    tampon : {t : 5},
    longueur : 1,
    x : 0,
    valeur actuelle : {xanchor : 'right', préfixe : 'i: ', police : {couleur : '#888', taille : 20}},
    étapes : étapes
  }]} ;
Plotly.newPlot('myDiv', données, mise en page);
document.getElementById('button').onclick = () =>
    document.getElementById('myDiv').classList.toggle('size2');
    Plotly.Plots.resize('myDiv');
}</pré>
<pre class="brush:css;toolbar:false;">#button { background-color: gray }
#myDiv {largeur : 500 px ; hauteur : 300 px ; bordure : 2 px, noir uni } ;
.size2 { largeur : 300px !important; hauteur : 200px !important }

<script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script>
<span id="button">Cliquez ici pour modifier la taille</span>
<div id="myDiv"></div>
<div id="text">Bonjour tout le monde</div>

Answer 1

Pour que Plotly occupe automatiquement tout l'espace disponible du conteneur, vous pouvez utiliser l'option « autosize » dans l'objet de mise en page.

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