窗口最大化时恢复ChartJS图表的原始布局

问题场景 #

我使用ChartJS开发页面，每个图表放置在独立的div中，采用PrimeNG的formgrid网格布局。当前窗口缩小时图表会自动变为单列（符合预期），但窗口最大化后无法恢复到最初的行列布局。

页面HTML结构 #

<div class="formgrid grid gap-2">
  <div class="chart-container field col" [ngClass]="{'fullScreen': expandVisible[0]}">
    <div style="text-align: center; padding-top: 15%;"
         *ngIf="loading[0] || disableStepper">
      <p-progressSpinner ariaLabel="loading" />
    </div>
    <div style="margin-top: 10px; margin-left: 10px;position: absolute;"
         *ngIf="!loading[0] && !disableStepper">
      <p-button icon="pi pi-expand"
                (onClick)="expandChart(0)" />
    </div>
    <canvas id="GeneralChart1">{{ chart }}</canvas>
  </div>
  <div class="chart-container field col" [ngClass]="{'fullScreen': expandVisible[1]}">
    <div style="text-align: center; padding-top: 15%;"
         *ngIf="loading[1] || disableStepper">
      <p-progressSpinner ariaLabel="loading" />
    </div>
    <div style="margin-top: 10px; margin-left: 10px;position: absolute;"
         *ngIf="!loading[1] && !disableStepper">
      <p-button icon="pi pi-expand"
                (onClick)="expandChart(1)" />
    </div>
    <canvas id="GeneralChart2">{{ chart }}</canvas>
  </div>
</div>
<div class="formgrid grid gap-2">
  <div class="field col-12 md:col-3"></div>
  <div class="chart-container field col-12 md:col-6" [ngClass]="{'fullScreen': expandVisible[2]}">
    <div style="text-align: center; padding-top: 15%;"
         *ngIf="loading[2] || disableStepper">
      <p-progressSpinner ariaLabel="loading" />
    </div>
    <div style="margin-top: 10px; margin-left: 10px;position: absolute;"
         *ngIf="!loading[2] && !disableStepper">
      <p-button icon="pi pi-expand"
                (onClick)="expandChart(2)" />
    </div>
    <canvas id="GeneralChart3">{{ chart }}</canvas>
  </div>
  <div class="field col-12 md:col-3"></div>
</div>

ChartJS配置选项 #

options: {
  plugins: {
    title: {
      display: true,
      text: 'Maximum Demand Vs Installed Capacity',
      padding: {
        top: 10,
        bottom: 30
      }
    },
    legend: {
      position: 'bottom'
    },
    datalabels: {
      display: false
    },
    zoom: {
      pan: {
        enabled: true,
        mode: 'xy',
      },
      zoom: {
        wheel: {
          enabled: true,
          speed: 0.1,
        },
        pinch: {
          enabled: true,
        },
        mode: 'xy',
      },
    },
  },
  responsive: true,
  scales: {
    x: {
      display: true,
    },
    y: {
      display: true,
      beginAtZero: true
    }
  },
},

解决方案 #

问题根源在于ChartJS的响应式重绘与PrimeNG网格布局的重排不同步，导致窗口放大时网格未重新计算。以下是具体解决步骤：

1. 确保网格布局的响应式阈值正确 #

PrimeNG的md:col-*类默认以960px为断点，窗口宽度超过该值时触发网格布局。如果需要调整阈值，可通过CSS变量自定义：

:root {
  --p-breakpoint-md: 960px; /* 根据需求修改断点宽度 */
}

2. 监听窗口resize事件，强制图表重绘与布局更新 #

在Angular组件中保存所有Chart实例，监听窗口resize事件，手动触发图表resize并触发变更检测：

import { Component, OnInit, HostListener } from '@angular/core';
import { Chart } from 'chart.js';

export class YourChartComponent implements OnInit {
  private charts: Chart[] = [];

  ngOnInit() {
    // 初始化图表时将实例存入数组
    this.charts.push(new Chart('GeneralChart1', { /* 你的图表配置 */ }));
    this.charts.push(new Chart('GeneralChart2', { /* 你的图表配置 */ }));
    this.charts.push(new Chart('GeneralChart3', { /* 你的图表配置 */ }));
  }

  @HostListener('window:resize')
  onWindowResize() {
    // 触发所有图表的resize方法，更新尺寸
    this.charts.forEach(chart => chart?.resize());
    // 若组件使用OnPush变更检测策略，需注入ChangeDetectorRef并调用detectChanges()
    // this.cdr.detectChanges();
  }
}

3. 优化图表容器CSS，避免尺寸异常 #

给.chart-container添加最小宽高，防止窗口放大时容器尺寸塌陷：

.chart-container {
  min-width: 300px;
  min-height: 300px;
  position: relative; /* 确保绝对定位的展开按钮正常显示 */
}

4. 检查fullScreen类样式，避免干扰布局 #

确保全屏样式仅在点击展开时生效，且不影响其他图表的网格布局：

.fullScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999;
}

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