Question

我在动态创建的页面上有大约10个图。为了节省空间，他们都从小开始，用户可以按一个按钮来放大＆＃34;当他们想要近距离观察他们时。在小型和大型模式下，用户可以根据需要进行缩放和操作，但是当用户放大一个绘图然后切换另一个绘图的大小时，他们正在调整大小的图表并且＃34;快照＆＃34;到第一个图的缩放轮廓。

希望我没有解释这个太容易混淆。这是执行调整大小的代码片段。

            $(document.getElementById(expArr[index])).click( function() {
                $(gd).toggleClass('clk');
                Plotly.Plots.resize(gd);
            });

expArr只保存按钮的id，因为它们是在代码隐藏中动态创建的，gd保存了绘图所在的div。切换div的类只会改变保存高度/宽度的类。

所有调整大小都很好。只是当您调整一个绘图和缩放的大小时，然后调整第二个绘图的大小，第二个绘图＆＃34;快照＆＃34;在第一个图上完成了缩放。

Answer 1

我弄清楚我做错了什么。我确定如果我发布更多代码会有人注意到我的错误。

基本上我正在使用一个带有循环的函数在页面上绘制我的所有绘图，但是我将布局var留在了所有那些之外，因此它是为每个绘图重用的相同对象。因此，当我在一个绘图上调用resize时，它看到布局已更改并更新为新数据。

简单移动布局解决了问题

调整页面大小时的多个图表

1 个答案: