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

Question

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

标签： javascriptangulartypescriptprimengngx-charts

Answer 1

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

在你的组件 HTML 中做

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

然后在你的组件中做

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

我想必须这样做，就像对话框根据最小化的大小最小化图表调整大小并且它与图表上的线条出现错误一样。但是如果没有线条，那么它不会在最小化时尝试绘制。