div の全高/全幅を動的に使用する Plotly JS メソッド

Question

<p>上のボタンをクリックすると、コンテナ <code>#myDiv</code> のサイズが変更されます。 Plotly がコンテナ内のすべての利用可能なスペースを、目立った遅延なく自動的に占有するようにするにはどうすればよいですか? </p> <p>ここではレイテンシが若干高くなります: </p> <p> <pre class="brush:js;toolbar:false;">var z = []、steps = []、i; for (i = 0; i <500; i ) z.push(Array.from({length: 600}, () => Math.floor(Math.random() * 100))); for (i = 0; i < 100; i ) Steps.push({ ラベル: i, メソッド: 'restyle', args: ['line.color', 'red']}); var data = [{z: z、カラースケール: 'YlGnBu'、タイプ: 'ヒートマップ'}]; var レイアウト = {タイトル: ''、スライダー: [{ パッド: {t: 5}、 レン: 1、 ×：0、 現在の値: {xanchor: 'right'、プレフィックス: 'i: '、フォント: {color: '#888'、サイズ: 20}}、 ステップ: ステップ }]}; Plotly.newPlot('myDiv', データ, レイアウト); document.getElementById('button').onclick = () => { document.getElementById('myDiv').classList.toggle('size2'); Plotly.Plots.resize('myDiv'); }</pre> <pre class="brush:css;toolbar:false;">#button { 背景色: グレー; } #myDiv { 幅: 500 ピクセル; 高さ: 300 ピクセル; 境界線: 2 ピクセルの黒一色; } .size2 { 幅: 300px !重要; 高さ: 200px !重要; }</pre> <pre class="brush:html;toolbar:false;"><script src="https://cdn.plot.ly/plotly-2.16.2.min.js"></script> <span id="button">サイズを変更するにはここをクリック</span> <div id="myDiv"></div> <div id="text">Hello world</div></pre> </p>

Answer 1

Plotly がコンテナーのすべての利用可能なスペースを自動的に占有するようにするには、レイアウト オブジェクトで 'autosize' オプションを使用できます。

リーリー