Angular应用切换屏幕时可视化组件适配异常问题

问题现象 #

仪表板中使用PrimeNG Charts（基于Chart.js）实现4个可视化组件，组件宽高设为容器的100%：

• 手动拖拽窗口缩放时，组件能正常适配容器尺寸
• 切换屏幕（如设备旋转、切换显示设备）时，组件无法自动适配，必须刷新页面才生效

当前布局结构：

<div class="top">
  <div class="count">
    <app-visualisation></app-visualisation>
  </div>
  <div class="bar">
    <app-category-bar-graph></app-category-bar-graph>
  </div>
</div>

<div class="bottom">
  <div class="donut">
    <app-category-pie-graph></app-category-pie-graph>
  </div>
  <div class="histogram">
    <app-category-bar-graph-segmented></app-category-bar-graph-segmented>
  </div> 
</div>

p-chart组件示例：

<p-chart type="bar" 
    [data]="data" 
    [options]="options"
    width="100%"
    height="100%">
</p-chart>

已尝试通过window:resize监听设置宽高，但无效。

核心原因 #

1. 仅设置组件的width/height属性不会触发Chart.js实例的重绘逻辑，必须调用实例的resize()方法
2. 切换屏幕时，DOM重排可能滞后于resize事件触发，导致获取的容器尺寸为旧值
3. 未正确配置Chart.js的响应式参数，导致组件无法自动监听容器尺寸变化

解决方案 #

方案1：配置Chart.js响应式参数（最简便） #

在图表的options中开启Chart.js原生的响应式支持，让组件自动适配容器：

this.options = {
  responsive: true, // 开启响应式，自动监听容器尺寸变化
  maintainAspectRatio: false, // 禁用固定宽高比，完全填充容器
  // 其他图表配置...
};

保留p-chart的width="100%"和height="100%"设置即可，无需额外监听事件。

方案2：手动调用Chart.js实例的resize方法 #

通过ViewChild获取p-chart实例，在窗口resize或组件初始化时主动触发重绘：

import { ViewChild, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
import { Chart } from 'primeng/chart';

@Component({
  selector: 'app-category-bar-graph',
  templateUrl: './category-bar-graph.component.html'
})
export class CategoryBarGraphComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(Chart) chart!: Chart;
  private resizeHandler!: () => void;

  ngOnInit() {
    this.resizeHandler = this.adjustChartSize.bind(this);
  }

  ngAfterViewInit() {
    // 初始化时先适配一次
    this.adjustChartSize();
    // 监听窗口resize事件
    window.addEventListener('resize', this.resizeHandler);
  }

  ngOnDestroy() {
    // 移除监听，避免内存泄漏
    window.removeEventListener('resize', this.resizeHandler);
  }

  private adjustChartSize() {
    // 延迟执行，确保DOM重排完成
    setTimeout(() => {
      if (this.chart?.chart) {
        // 调用Chart.js实例的resize方法，触发重绘
        this.chart.chart.resize();
      }
    }, 100);
  }
}

方案3：监听父容器尺寸变化（适配复杂布局） #

如果容器尺寸变化不依赖窗口resize（如flex/grid布局导致的尺寸变化），使用ResizeObserver监听父容器：

import { ViewChild, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
import { Chart } from 'primeng/chart';

@Component({
  selector: 'app-category-bar-graph',
  templateUrl: './category-bar-graph.component.html'
})
export class CategoryBarGraphComponent implements AfterViewInit, OnDestroy {
  @ViewChild(Chart) chart!: Chart;
  @ViewChild('parentContainer', { read: ElementRef }) parentContainer!: ElementRef;
  private resizeObserver!: ResizeObserver;

  ngAfterViewInit() {
    this.resizeObserver = new ResizeObserver(() => {
      this.adjustChartSize();
    });
    // 监听父容器的尺寸变化
    this.resizeObserver.observe(this.parentContainer.nativeElement);
    // 初始化适配
    this.adjustChartSize();
  }

  ngOnDestroy() {
    this.resizeObserver.disconnect();
  }

  private adjustChartSize() {
    if (this.chart?.chart) {
      this.chart.chart.resize();
    }
  }
}

对应的模板修改（给父容器加模板引用）：

<div class="bar" #parentContainer>
  <p-chart type="bar" [data]="data" [options]="options" width="100%" height="100%"></p-chart>
</div>

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