div の全高/全幅を動的に使用する Plotly JS メソッド
<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>
