ChartJS inside modal/popup window,图表显示0px高度
ChartJS inside modal/popup window, chart displays 0px height
我试图在用户单击按钮时在模态 window 中显示图表。模态 window 设置为 display: none; 直到单击按钮，然后设置为 display: flex;
我可以将图表带出模态，它会正常工作。
如果我在开发工具中更改图表的高度（从 0px 开始），图表就会出现。
我创建了一个 codepen 来演示问题。只需 comment/un-comment 模态代码 inside/outside 即可查看。
图表的代码是我从我发现的另一个代码笔示例中提取的。
另一个 Whosebug 答案提供了一些帮助，但是我正在努力将解决方案实施到我自己的代码中。这是我找到的答案：
"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."
所以你在寻找类似 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 object 中。通过这样做，当您调用 vue_object.update() 时，所有 data/options 都已经在对象中了。
那么，我在您的代码中所做的更改：
- 将
Vue.component 声明为 var aux；
- 将
options 添加到 Vue object 并在 renderChart() 中调用 this.options
- 在您的
EventListener 上调用了 aux.update() 按钮。
希望对您有所帮助！如果您还有其他需要，欢迎您提出！
注意：由于您的图表很大，在代码笔中可能无法完全显示！
我试图在用户单击按钮时在模态 window 中显示图表。模态 window 设置为 display: none; 直到单击按钮，然后设置为 display: flex;
我可以将图表带出模态，它会正常工作。
如果我在开发工具中更改图表的高度（从 0px 开始），图表就会出现。
我创建了一个 codepen 来演示问题。只需 comment/un-comment 模态代码 inside/outside 即可查看。
图表的代码是我从我发现的另一个代码笔示例中提取的。
另一个 Whosebug 答案提供了一些帮助，但是我正在努力将解决方案实施到我自己的代码中。这是我找到的答案：
"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."
所以你在寻找类似 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 object 中。通过这样做，当您调用 vue_object.update() 时，所有 data/options 都已经在对象中了。
那么，我在您的代码中所做的更改：
- 将
Vue.component声明为var aux； - 将
options添加到Vue object并在renderChart() 中调用 - 在您的
EventListener上调用了aux.update()按钮。
this.options
希望对您有所帮助！如果您还有其他需要，欢迎您提出！
注意：由于您的图表很大，在代码笔中可能无法完全显示！