当 div 尺寸较小时，Angular chartJs 不呈现

Question

我正在尝试使用 chartjs 以角度创建象限图，并且在更大的空间中呈现完美但无法在小区域中呈现。

Scatter chatejs 模块

import Chart, { ChartConfiguration, ChartDataSets } from "chart.js";

export default class MyChart {
  private readonly canvasId: string;
  private readonly data: any;

  private quadrants = {
    id: "quadrantChartJs",
    beforeDraw(chart, args, options) {
      console.log(
        "🚀 ~ file: chartjs-scatterChart.ts:10 ~ MyChart ~ beforeDraw ~ chart:",
        chart
      );
      const {
        ctx,
        chartArea: { left, top, right, bottom },
      } = chart;
      const x = chart.scales["x-axis-1"];
      const y = chart.scales["y-axis-1"];

      const midX =(x.getPixelForValue(x.min) + x.getPixelForValue(x.max)) / 2;
      const midY =(y.getPixelForValue(y.min) + y.getPixelForValue(y.max)) / 2;

      ctx.save();
      ctx.fillStyle = options.topLeft;
      ctx.fillRect(left, top, midX - left, midY - top);
      ctx.fillStyle = options.topRight;
      ctx.fillRect(midX, top, right - midX, midY - top);
      ctx.fillStyle = options.bottomRight;
      ctx.fillRect(midX, midY, right - midX, bottom - midY);
      ctx.fillStyle = options.bottomLeft;
      ctx.fillRect(left, midY, midX - left, bottom - midY);
      ctx.restore();
    },
  };

  constructor(canvasId: string, data: any) {
    this.canvasId = canvasId;
    this.data = data;
  }

  public draw(): void {
    const canvas = document.getElementById(this.canvasId) as HTMLCanvasElement;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    new Chart(ctx, {
      type: "scatter",
      data: this.data,
      options: {
         plugins: {
           quadrantChartJs: {
             topLeft: "#FCFF33",
             topRight: "#EE2000",
             bottomRight: "#4B40EC",
             bottomLeft: "#CC26C0",
           },
         },
        resizeDelay: 100,
        responsive: true,
        maintainAspectRatio: false,
      },
      plugins: [this.quadrants],
    } as ChartConfiguration);
  }
}

图表组件 ngOnIt

ngOnInit() {
    const data = {
      datasets: [
        {
          label: "Scatter Dataset",
          data: [
            {
              x: -10,
              y: 0,
            },
            {
              x: 0,
              y: 10,
            },
            {
              x: 10,
              y: 5,
            },
            {
              x: 0.5,
              y: 5.5,
            },
          ],
          backgroundColor: "rgb(255, 99, 132)",
        },
        {
          label: "Scatter Dataset 2",
          data: [
            {
              x: -10,
              y: -10,
            },
            {
              x: 9,
              y: -10,
            },
            {
              x: -10,
              y: -5,
            },
            {
              x: 0.5,
              y: -5.5,
            },
          ],
          backgroundColor: "rgb(255, 99, 132)",
        },
      ],
    };

    const chart = new MyChart("quadrant-chart", data);
    chart.draw();
  }

HTML

 <div class="col-3">
      <div
        class="overflow-auto"
        style="
          position: relative;
          width: 100% !important;
          height: 100% !important;
        "
      >
        <!-- <div class="col-md-12"> -->
        <canvas id="quadrant-chart"></canvas>
      </div>
      <!-- </div> -->
    </div>

我尝试调整大小购买给画布的宽度和高度，给画布父 div overflow-auto 和一些来自https://github.com/jtblin/angular-chart.js/issues/614 的东西但对我来说不是他们工作。