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>