Maison  >  Questions et réponses  >  le corps du texte

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

<p>Lorsque vous cliquez sur le bouton du haut, la taille du conteneur <code>#myDiv</code> Comment puis-je faire en sorte que Plotly occupe automatiquement tout l'espace disponible dans un conteneur, <strong> sans aucun délai notable </strong> ? </p> <p>Il y a une latence plus élevée ici : </p> <p> <pre class="brush:js;toolbar:false;">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 }</pre> <pre class="brush:html;toolbar:false;"><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></pre> </p>
P粉012875927P粉012875927444 Il y a quelques jours543

répondre à tous(1)je répondrai

  • P粉046878197

    P粉0468781972023-08-26 11:23:06

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

    répondre
    0
  • Annulerrépondre