浏览器窗口缩放时p-chart高度不随容器自适应的问题

父容器内包含analysis-area，其中有chart-wrapper和table-wrapper两个元素，chart-wrapper里放置了两个PrimeNG的p-chart组件。
预期效果：浏览器窗口缩放时，chart-wrapper自适应扩展，table-wrapper占据剩余空间。
问题现象：窗口缩放后，chart-wrapper已完成扩展，但p-chart的高度未随之变化；若将p-chart替换为设置了width: 100%和height: 100%的空div，则无此问题。

代码示例 #

HTML代码 #

<div class="analysis-area">
  <div class="chart-wrapper">
    <div class="chart-panel">
      <p-chart #pAccuracyChart type="bar" [data]="accuracyChartData" width="500px" height="100%" [responsive]="true" [options]="accuracyChartOptions"></p-chart>
    </div>
    <div class="accuracyChart">
      <p-chart #pAccuracyChart type="bar" [data]="accuracyChartData" width="500px" height="100%" [responsive]="true" [options]="accuracyChartOptions"></p-chart>
    </div>
  </div>
  <div class="table-wrapper">
    <div class="data-table"></div>
    <div class="staticalTbl"></div>                  
  </div>
</div>

CSS代码 #

.analysis-area{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction:column;

  .chart-wrapper{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: row;

    .chart-panel{
      width: 50%;
      height: 100%;
    }        

    .accuracyChart{
      width: 50%;
      height: 100%;
    }
  }

  .table-wrapper{
    width: 100%;
    height: 40%;
    display: flex;
    flex-direction: row;
    
    .data-table{
      height: 100%;
      width: 50%;
    }
    .staticalTbl{
      height: 100%;
      width: 50%;
    }
  }
}

解决方法 #

1. 移除固定宽度，改用百分比 #

p-chart设置的width="500px"是固定值，会限制自适应能力，直接改成width="100%"，让图表继承父容器的宽度：

<p-chart #pAccuracyChart type="bar" [data]="accuracyChartData" width="100%" height="100%" [responsive]="true" [options]="accuracyChartOptions"></p-chart>

2. 配置Chart.js取消固定宽高比 #

仅设置[responsive]="true"不够，需要在图表配置里添加maintainAspectRatio: false，让图表完全跟随容器尺寸变化：

accuracyChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  // 其他原有配置
};

3. 修复Flex布局的高度传递问题 #

Flex容器的子元素可能会默认限制高度传递，给chart-wrapper及其子容器添加min-height: 0，确保高度能正常继承：

.chart-wrapper{
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: row;
  min-height: 0; /* 添加这行 */

  .chart-panel{
    width: 50%;
    height: 100%;
    min-height: 0; /* 添加这行 */
  }        

  .accuracyChart{
    width: 50%;
    height: 100%;
    min-height: 0; /* 添加这行 */
  }
}

4. 手动触发图表重绘（可选） #

如果窗口缩放后图表仍未更新，可监听resize事件手动调用图表的重绘方法：

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

@Component({
  // 组件配置
})
export class YourComponent implements OnDestroy {
  @ViewChild('pAccuracyChart') pAccuracyChart: Chart;
  resizeHandler: () => void;

  ngOnInit() {
    this.resizeHandler = () => {
      setTimeout(() => {
        this.pAccuracyChart?.chart?.resize();
      }, 100);
    };
    window.addEventListener('resize', this.resizeHandler);
  }

  ngOnDestroy() {
    window.removeEventListener('resize', this.resizeHandler);
  }
}

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