当用户单击按钮时，我正在尝试在模态窗口中显示图形。模式窗口设置为display: none;，直到单击按钮，然后设置为display: flex;
我可以将图表带到模态之外，它会正常工作。
如果我在开发工具中更改图表的高度(从 0px)，图表就会出现。
我创建了一个代码笔来演示这个问题。只需注释/取消注释模态内部/外部的代码即可查看。
图形的代码是我从我找到的另一个代码笔示例中获取的。
另一个堆栈溢出答案提供了一些帮助，但是我正在努力将解决方案实现到我自己的代码中。这是我找到的答案：
"问题似乎是画布及其所有父节点在进行图表调用时不能显示无，因此如果您在弹出窗口中使用图表，则需要显示弹出窗口，构建图表，然后隐藏弹出窗口。">
所以你正在寻找这样的东西，我想？
如果您查看Vue-chartJs文档，您将看到以下内容(故障排除页面)：
如果您使用的是mixin，则需要将选项作为道具名称选项传递。这很重要，因为 mixin 将调用 chart.js update() 方法或销毁并渲染一个新图表。如果mixin呈现一个新图表，它称之为this.renderChart(this.chartData，this.options)。
这意味着您的选项需要保存在Vue object.通过这样做，当您调用vue_object.update()时，所有数据/选项都已在对象中。
那么，我在您的代码中更改了什么：
- 宣布
Vue.component为var aux; - 将
options添加到Vue object中，并在renderChart()中调用this.options - 在
EventListener上为按钮调用aux.update()。
希望这对您有所帮助！如果您需要其他任何东西，欢迎您询问！
注意：由于您的图表非常大，因此在代码笔中可能不完全可见！