Angular中Chart.js/ng2-charts结合Flex布局图表显示异常问题

我在Angular项目中使用chart.js和ng2-charts创建两个环形（doughnut）图表，需求是让它们水平并排显示，且浏览器窗口调整大小时能均等伸缩。我尝试用Bootstrap Flex类实现，但图表无法均等占用宽度，窗口缩小也不会收缩。

现有代码 #

charts.component.html

<div class="d-flex">
  <div class="flex-fill">
    <canvas
      baseChart
      [data]="chartData"
      [options]="chartOptions"
      [type]="'doughnut'"
    >
    </canvas>
  </div>
  <div class="flex-fill">
    <canvas
      baseChart
      [data]="chartData"
      [options]="chartOptions"
      [type]="'doughnut'"
    >
    </canvas>
  </div>
</div>

charts.component.ts

import { Component } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-charts',
  imports: [BaseChartDirective],
  templateUrl: './charts.component.html',
  styleUrl: './charts.component.css',
})
export class ChartsComponent {
  chartData= {
    labels: [
      'Total orders',
      'Watch list',
      'Return requests',
      'Delivered orders',
    ],
    datasets: [
      {
        label: '# of Orders',
        data: [10, 20, 7, 25],
        borderWidth: 1,
      },
    ],
  };

  chartOptions= {
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };
}

问题表现 #

修复方案 #

1. 添加容器样式确保Canvas自适应宽度

在charts.component.css中添加样式，强制Canvas继承容器宽度：

.chart-container {
  width: 100%;
  min-height: 300px; /* 设置最小高度，避免窗口过小时图表变形 */
}

canvas {
  width: 100% !important;
  height: 100% !important;
}

同时修改HTML，给每个图表容器加上chart-container类，还可以加gap属性给图表之间留间距：

<div class="d-flex gap-3">
  <div class="flex-fill chart-container">
    <canvas baseChart [data]="chartData" [options]="chartOptions" [type]="'doughnut'"></canvas>
  </div>
  <div class="flex-fill chart-container">
    <canvas baseChart [data]="chartData" [options]="chartOptions" [type]="'doughnut'"></canvas>
  </div>
</div>

2. 调整图表配置适配环形图

环形图不需要y轴配置，原chartOptions里的scales设置是针对柱状图的，会干扰环形图的自适应。修改为以下配置：

chartOptions = {
  responsive: true, // 开启响应式
  maintainAspectRatio: true, // 保持宽高比
  aspectRatio: 1, // 设置为1保持正方形，可根据需求调整
  plugins: {
    legend: {
      position: 'bottom', // 图例移到底部，节省横向空间
    }
  }
};

3. 确认Bootstrap样式正确引入

检查angular.json的styles数组是否包含Bootstrap样式，确保Flex布局生效：

"styles": [
  "node_modules/bootstrap/dist/css/bootstrap.min.css",
  "src/styles.css"
]

原理说明 #

• Chart.js的Canvas默认带有固定尺寸，通过!important强制设置100%宽度，让它跟随容器伸缩。
• 开启responsive和maintainAspectRatio属性，让图表自动适配容器尺寸变化。
• 移除环形图不需要的y轴配置，避免无效配置影响图表布局。

内容的提问来源于stack exchange，提问作者sm-sayedi