chartjs / ng2-charts 图表在显示 Flex 中无法正常工作

Question

在我的 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,
      },
    },
  };
}

图表的宽度不相等，并且当浏览器窗口缩小时它们的尺寸也不会缩小：

Answer 1

在

responsive

中应用

maintainAspectRatio

和

chartOptions

设置，如下所示：

chartOptions = {
  scales: {
    y: {
      beginAtZero: true,
    },
  },
  responsive: true,
  maintainAspectRatio: false,
};

演示@StackBlitz

参考：响应图表