PrimeNG弹窗关闭后重开时ngx-charts折线图线条消失问题问询

问题根源 #

PrimeNG Dialog默认关闭时仅将容器设置为display: none，不会销毁内部DOM节点。ngx-charts首次渲染时能获取弹窗打开后的正常容器尺寸计算线条路径；弹窗关闭期间容器宽度/高度为0，二次打开时ngx-charts复用原有实例，使用错误的0尺寸完成重绘，导致svg线条路径异常不可见，数据绑定不受影响所以tooltip仍可正常触发。 #

解决方案 #

• 方案1：启用弹窗销毁模式（首选，改动量最小）
  给p-dialog组件添加[destroyOnHide]="true"属性，每次关闭弹窗时自动销毁内部所有DOM节点，下次打开时完整重绘整个组件树，ngx-charts会重新获取正确尺寸完成渲染。
  代码示例：

<p-dialog 
  header="数据折线图" 
  [visible]="showDialog" 
  [destroyOnHide]="true"
  [modal]="true"
  [style]="{width: '900px'}"
>
  <ngx-charts-line-chart
    [results]="chartData"
    [xAxis]="true"
    [yAxis]="true"
    [legend]="true"
    [showXAxisLabel]="true"
    [showYAxisLabel]="true"
    xAxisLabel="时间"
    yAxisLabel="数值"
  ></ngx-charts-line-chart>
</p-dialog>

• 方案2：弹窗显示时手动触发图表重绘（适用于需要保留弹窗内部状态的场景）
  如果不想销毁弹窗内其他组件的状态（如表单输入值、其他操作状态），可以监听弹窗的onShow事件，弹窗完全打开后手动调用ngx-charts的更新方法重绘图表。
  模板代码：

<p-dialog 
  header="数据折线图" 
  [visible]="showDialog" 
  [modal]="true"
  [style]="{width: '900px'}"
  (onShow)="refreshChart()"
>
  <ngx-charts-line-chart
    #lineChartRef
    [results]="chartData"
    [xAxis]="true"
    [yAxis]="true"
    [legend]="true"
    [showXAxisLabel]="true"
    [showYAxisLabel]="true"
    xAxisLabel="时间"
    yAxisLabel="数值"
  ></ngx-charts-line-chart>
</p-dialog>

组件TS代码：

import { Component, ViewChild } from '@angular/core';
import { LineChartComponent } from '@swimlane/ngx-charts';

@Component({
  // 你的组件配置
})
export class YourComponent {
  showDialog = false;
  chartData = []; // 你的图表数据源
  @ViewChild('lineChartRef') lineChart!: LineChartComponent;

  refreshChart() {
    // 加0ms延迟等待弹窗DOM渲染完成、尺寸稳定后再更新
    setTimeout(() => {
      this.lineChart.update();
    }, 0);
  }
}

• 方案3：固定图表尺寸（适用于弹窗尺寸固定的场景）
  直接给ngx-charts绑定固定的view参数，禁止自适应容器尺寸，从根源避免容器尺寸变化带来的计算错误。
  代码示例：

<ngx-charts-line-chart
  [view]="[850, 450]" <!-- 第一个参数为宽度，第二个为高度，可根据弹窗实际尺寸调整 -->
  [results]="chartData"
  [xAxis]="true"
  [yAxis]="true"
  [legend]="true"
  [showXAxisLabel]="true"
  [showYAxisLabel]="true"
  xAxisLabel="时间"
  yAxisLabel="数值"
></ngx-charts-line-chart>

内容的提问来源于stack exchange，提问作者C McCoy