我们在 Vue/Nuxt 单页应用程序中使用 Plotly.js。为了确保创建的绘图在其父 DOM 节点发生变化时(例如，当用户更改窗口大小时)自动调整大小，我们为绘图图表启用了 responsive: true 选项。
每当用户更改屏幕尺寸(如预期)时，启用此标志会自动调整绘图大小。但是，在调整窗口大小时会多次记录以下错误:
Error: Resize must be passed a displayed plot div element.
为单个图或简单示例复制此内容似乎不起作用。根据我们迄今为止的发现，这似乎只有在多个图可见时才会发生。
最佳答案
通过调试堆栈跟踪中的代码，我们发现这是由于未正确销毁先前渲染的绘图而导致的。
显然，当绘图不可见并且设置了 responsive: true 标志时，可能会引发此错误。
在我们的例子中发生的情况是，每当组件被销毁时，我们应用程序的某些组件就不会调用 Plotly.purge($myPlot) (例如，如果用户导航到另一个页面，就会发生这种情况) )。未破坏的绘图将保留在内存中但保持不可见，因此每当调整浏览器窗口大小时都会触发上述错误。我们能够通过比较抛出此错误的图的 DOM 节点 ID 与可见的图来识别这一点。
关于vue.js - 调整窗口大小时，Plotly.js 的响应标志会导致错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54290443/