javascript - 模态/弹出窗口内的 ChartJS，图表显示 0px 高度

Question

我试图在用户单击按钮时在模态窗口内显示图形。模态窗口设置为 display: none; 直到按钮被点击，然后被设置为 display: flex;

我可以将图表带出模态，它会正常工作。

如果我在开发工具中更改图表的高度(从 0px 开始)，图表就会出现。

我创建了一个 codepen这说明了问题。只需注释/取消注释模态内部/外部的代码即可查看。

该图的代码是我从我发现的另一个代码笔示例中提取的。

另一个 stackoverflow 答案提供了一些帮助，但是我正在努力将解决方案实现到我自己的代码中。这是我找到的答案:

"It appears that the issue is that the canvas and all its parent nodes cannot have display none at the time the chart call is made so if you are using a chart in a popup you need to show the popup, construct the chart and then hide the popup."

Answer 1

所以你正在寻找类似 this 的东西，我想？

如果查看 Vue-chartJs 文档，您会看到这个 ( troubleshooting page):

If you are using the mixin you need to pass in your options as a prop names options. This is important because the mixin will call chart.js update() method or destroy and render a new chart. If the mixin renders a new chart it calls this.renderChart(this.chartData, this.options).

这意味着您的选项需要保存在 Vue 对象 中。通过这样做，当您调用 vue_object.update() 时，所有数据/选项都已经在对象中。

那么，我在您的代码中所做的更改:

• 将 Vue.component 声明为 var aux；
• 将 options 添加到 Vue 对象 并在 renderChart() 中调用 this.options<
• 在 EventListener 上为按钮调用了 aux.update()。

希望对您有所帮助!如果您还需要什么，欢迎您提出!

注意:由于您的图表非常大，因此在 codepen 中可能无法完全看到!