Гистограмма не отображается, пока я не изменю размеры окна браузера, используя Canvas JS, HTML и Angular - PullRequest
Новая
       10

Гистограмма не отображается, пока я не изменю размеры окна браузера, используя Canvas JS, HTML и Angular

0 голосов
/ 15 марта 2020

Я сделал гистограмму, используя Canvas JS, HTML и angular, проблема, с которой я сталкиваюсь, заключается в том, что гистограмма отображается только при изменении размера браузера , как мне решить эту проблему.

Код TypeScript: 

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>
...