plotly offline

Plotly offline 자동 크기 변환 안되는 경우

 

<div id="5da331c3-3f1f-4331-914e-5ba61259eb35" style="height: 100%; width: 100%;" class="plotly-graph-div"></div>

<script type="text/javascript">window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL="https://plot.ly";Plotly.newPlot("5da331c3-3f1f-4331-914e-5ba61259eb35", [{"y": [20, 14, 23], "x": ["giraffes", "orangutans", "monkeys"], "type": "bar"}], {}, {"linkText": "Export to plot.ly", "showLink": true})</script>

<script type="text/javascript">window.removeEventListener("resize", document.getElementById("5da331c3-3f1f-4331-914e-5ba61259eb35"));

window.addEventListener("resize", function(){Plotly.Plots.resize(document.getElementById("5da331c3-3f1f-4331-914e-5ba61259eb35"));});</script>

원본

<script type="text/javascript">window.removeEventListener("resize"); 

변경 후

<script type="text/javascript">window.removeEventListener("resize", document.getElementById("5da331c3-3f1f-4331-914e-5ba61259eb35"));

위의 코드는 python에서 offline으로 div 태그 생성한 결과이다.

헌데, edge에서는 정상 동작하지만, 크롬에서는 해당 코드를 bootstrap 관련된 기존 코드 위에 붙였을 경우

자동 크기 변환이 되지 않았다.

원인을 찾아보니, 위와 같이 removeEventListener에서 객체를 파라미터로 넘겨야 되는데 넘기는 부분이 빠져 있어서였다.

DOM 관련 버전 차이 인 듯 하다.