我试图在用户单击按钮时在模式窗口内显示图形。模态窗口设置为display: none;直到单击按钮，然后将其设置为display: flex;
我可以将图表放在模态之外，并且可以正常工作。
如果我在开发工具中更改图表的高度（从0px开始），则会显示该图表。
我创建了一个codepen来说明问题。只需注释/取消注释模式内部/外部的代码即可。
该图的代码是我从另一个发现的Codepen示例中获取的。
另一个stackoverflow答案提供了一些帮助，但是我正在努力将解决方案实施到自己的代码中。这是我找到的答案：
”看来问题是在进行图表调用时画布及其所有父节点无法显示任何内容，因此，如果您在弹出窗口中使用图表，则需要显示弹出窗口，构造图表然后隐藏弹出窗口。”
答案 0 :(得分：0)
我想您正在寻找类似this的东西吗？
如果您签出Vue-chartJs文档，则会看到以下内容（troubleshooting page）：
如果您使用mixin，则需要将选项作为道具名称选项传递。这很重要，因为mixin将调用chart.js update（）方法或销毁并呈现新图表。如果混入渲染了新图表，它将调用this.renderChart（this.chartData，this.options）。
这意味着您的选项需要保存在Vue object中。这样，当您调用vue_object.update()时，所有数据/选项都已在对象中。
因此，我在您的代码中所做的更改：
Vue.component声明为var aux； options添加到Vue object，并在this.options中调用renderChart() aux.update()上为该按钮调用了EventListener。希望这对您有所帮助！如果您还有其他需要，欢迎提出要求！
注意：由于您的图表很大，因此可能无法在码本中完全看到它！