我试图在CSS弹性框内将两个图形图拼接在一起.我希望它们在调整窗口大小时调整大小.当窗口增长时,它按预期工作,但是当窗口变小时,图形不会缩小.
var trace1 = {};
var trace2 = {};
var plotdiv1 = document.getElementById("plotdiv1");
var plotdiv2 = document.getElementById("plotdiv2");
Plotly.newPlot(plotdiv1, [trace1]);
Plotly.newPlot(plotdiv2, [trace2]);
window.addEventListener("resize", function() {
Plotly.Plots.resize(plotdiv1);
Plotly.Plots.resize(plotdiv2);
});.plot-div {
max-width: 100%;
}
.plot-col {
flex: 0 0 50%;
}
.my-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<body>
<div class="my-container">
<div class="plot-col">
<div id="plotdiv1" class="plot-div"></div>
</div>
<div class="plot-col">
<div id="plotdiv2" class="plot-div"></div>
</div>
</div>
</body>JSFiddle:https://jsfiddle.net/bd0reepd/
我可能误解了flexbox的工作原理,但是如果我用图像替换这些图,它们会按预期收缩.
我试图调试这个并找到了plotlys内部函数plotAutoSize,它相应地调用window.getComputedStyle和设置绘图大小.我曾经 …