html - 为什么chartjs不在div内部绘制？

Question

我对 ChartJs 有疑问，因为我尝试将 class="col-6" 放入 div 的内部，它只有在 class="row" 并且不明白为什么时才有效。

饼图.components.ts：

ngOnInit() {
    this.labels = ["ONE", "TWO", "THREE"];
    this.chartInit();
  }

  chartInit() {
    let chartElement = this.elementRef.nativeElement.querySelector("#myChart");
    chartElement.width = 750;
    chartElement.height = 750;
    this.pieChart = new Chart(chartElement, {
      type: "outlabeledPie",
      data: {
        labels: this.labels,
        datasets: [
          {
            backgroundColor: [
              "#FF3784",
              "#36A2EB",
              "#4BC0C0",
              "#F77825",
              "#9966FF",
              "#00A8C6",
              "#379F7A",
              "#CC2738",
              "#8B628A",
              "#8FBE00"
            ],
            data: [1, 2, 3]
          }
        ]
      },
      options: {
        plugins: {
          legend: false,
          outlabels: {
            text: "%l %p",
            color: "white",
            stretch: 20,
            font: {
              resizable: true,
              minSize: 12,
              maxSize: 25
            }
          }
        },
        responsive: true
      }
    });
  }

饼图.components.html：

<canvas id="myChart" height="750" width="750"></canvas>

home.components.html：

<div class="row">
    <div class="col-6 text-center">
        Available books
        <app-pie-chart></app-pie-chart>
    </div>
    <div class="col-6 text-center">
        Lended books
        <app-pie-chart></app-pie-chart>
    </div>
</div>

正在运行的代码（但我不想要这个版本）：

<div class="row">
    <div class="row text-center">
        Available books
        <app-pie-chart></app-pie-chart>
    </div>
    <div class="row text-center">
        Lended books
        <app-pie-chart></app-pie-chart>
    </div>
</div>

那么如何在这两个 div 的内部显示这两个饼图呢？第二个问题是：为什么只在 class="row" 的 div 中工作，而在没有 class 或其他 class 的 div 中不显示任何内容？谢谢！

标签： htmlangulartypescriptcanvaschart.js