当在关闭并重新打开的 PrimeNG 对话框中绘制图表时，ngx-charts 线条消失

Question

我目前正在为我的打字稿 angular 应用程序使用 PrimeNG。我正在使用 PrimeNG 提供的 dialog 组件来弹出一个通过 ngx-charts（特别是 ngx-charts-line-chart）绘制图表的窗口。当我第一次打开对话框时，图表绘制得很好。但是，当我关闭对话框然后重新打开它时，图表中的线条消失了，没有错误输出。当图表处于这种状态时，我仍然可以将鼠标悬停在它上面并通过工具提示查看点，但线条已经完全消失。我能想到的唯一潜在原因是当对话框关闭时它正在调整大小并导致 ngx-charts 做一些奇怪的事情。

Answer 1

通过测试找到了答案。我使用dialog组件的onHide属性将图表数据设置为空数组，然后在重新打开时重新设置图表数据

在你的组件中HTML做

<p-dialog (onHide)="onHide()">-chart stuff here-</p-dialog>

然后在你的组件中执行

onHide(){ let o = [] as any; this.chartData = [...o]}

我想必须这样做，因为当对话框最小化图表时，图表会根据最小化的大小调整大小，并且图表上的线条会出错。但是，如果没有线条，则它不会在最小化时尝试绘制。