div의 전체 높이/너비를 동적으로 사용하는 Plotly JS 메서드

Question

상단 버튼을 클릭하면 #myDiv 컨테이너의 크기가 변경됩니다. 눈에 띄는 지연 없이Plotly가 컨테이너의 사용 가능한 모든 공간을 자동으로 차지하도록 하려면 어떻게 해야 합니까?

여기에는 지연 시간이 좀 더 높습니다.

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, colorscale: 'YlGnBu', 유형: 'heatmap'}];
var 레이아웃 = {제목: '', 슬라이더: [{
    패드: {t: 5},
    렌: 1,
    x: 0,
    현재값: {xanchor: 'right', 접두사: 'i: ', 글꼴: {color: '#888', 크기: 20}},
    단계: 단계
  }]};
Plotly.newPlot('myDiv', 데이터, 레이아웃);
document.getElementById('button').onclick = () =>
    document.getElementById('myDiv').classList.toggle('size2');
    Plotly.Plots.resize('myDiv');
}

#button { 배경색: 회색 }
#myDiv { 너비: 500px; 높이: 300px; 단색 검정색 }
.size2 { 너비: 300px !important; 높이: 200px !important }

<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>

Answer 1

Plotly가 컨테이너의 사용 가능한 모든 공간을 자동으로 차지하도록 하려면 레이아웃 개체에서 '자동 크기 조정' 옵션을 사용할 수 있습니다.

으아악