Heim  >  Fragen und Antworten  >  Hauptteil

Plotly JS-Methode zur dynamischen Nutzung der vollen Höhe/Breite eines Div

<p>Wenn auf die obere Schaltfläche geklickt wird, ändert sich die Größe des Containers <code>#myDiv</code> Wie kann ich dafür sorgen, dass Plotly automatisch den gesamten verfügbaren Platz in einem Container belegt,<strong>ohne merkliche Verzögerung</strong>? </p> <p>Hier gibt es eine etwas höhere Latenz: </p> <p> <pre class="brush:js;toolbar:false;">var z = [],steps = [], i; für (i = 0; i < 500; i++) z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100))); für (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 = {Titel: '', Schieberegler: [{ Pad: {t: 5}, Länge: 1, x: 0, aktueller Wert: {xanchor: 'right', prefix: 'i: ', Schriftart: {color: '#888', size: 20}}, Schritte: Schritte }]}; Plotly.newPlot('myDiv', data, layout); document.getElementById('button').onclick = () => document.getElementById('myDiv').classList.toggle('size2'); Plotly.Plots.resize('myDiv'); }</pre> <pre class="brush:css;toolbar:false;">#button { background-color: grey } #myDiv {Breite: 500px; Höhe: 300px; Rand: 2px einfarbig; .size2 { width: 300px !important; height: 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">Klicken Sie hier, um die Größe zu ändern</span> <div id="myDiv"></div> <div id="text">Hallo Welt</div></pre> </p>
P粉012875927P粉012875927444 Tage vor541

Antworte allen(1)Ich werde antworten

  • P粉046878197

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

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

    Antwort
    0
  • StornierenAntwort