html - 在我使用 CanvasJS、HTML 和 Angular 调整浏览器窗口大小之前，条形图不会显示

Question

我使用 CanvasJS、HTML 和 angular 制作了条形图，我面临的问题是条形图仅在我调整浏览器大小时显示，我该如何解决这个问题。

打字稿代码是：

import { Component, OnInit } from '@angular/core';
import * as CanvasJS from 'node_modules/canvasjs/dist/canvasjs.min'

    @Component({
    selector: 'app-c2',
  templateUrl: './c2.component.html',
  styleUrls: ['./c2.component.css']
})
export class C2Component implements OnInit {

constructor(){


}

  ngOnInit() {
    let chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    exportEnabled: true,
    title: {
      text: "Basic Column Chart in Angular"
    },
    data: [{
      type: "column",
      dataPoints: [
        { y: 71, label: "Apple" },
        { y: 55, label: "Mango" },
        { y: 50, label: "Orange" },
        { y: 65, label: "Banana" },
        { y: 95, label: "Pineapple" },
        { y: 68, label: "Pears" },
        { y: 28, label: "Grapes" },
        { y: 34, label: "Lychee" },
        { y: 14, label: "Jackfruit" },
        { y: 14, label: "Guava" }
      ]
    }]
  });

  chart.render();

    }
    }

HTML 代码是：

<div id="chartContainer" style="height: 55%; width: 55%;" ></div>

标签： htmlangulartypescriptcanvasjs