Angular中的Chart.js图表直到调整浏览器窗口大小才加载
创始人
2024-10-31 03:00:31
0

您可以使用Angular的@HostListener装饰器来监听窗口大小的变化,并在窗口大小改变时重新加载图表。

首先,确保您已经安装了chart.jsng2-charts依赖项。然后,在您的组件中导入所需的模块和依赖项:

import { Component, OnInit, ViewChild, ElementRef, HostListener } from '@angular/core';
import { Chart } from 'chart.js';

然后在组件类中定义一个变量来持有图表实例:

export class YourComponent implements OnInit {
  @ViewChild('chartCanvas') chartCanvas: ElementRef;
  chart: any;

  // 其他代码...

}

接下来,在ngOnInit方法中初始化图表,并添加@HostListener装饰器来监听窗口大小的变化:

ngOnInit() {
  this.chart = new Chart(this.chartCanvas.nativeElement, {
    // 图表配置...
  });
}

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.chart.resize();
}

最后,在组件的模板中添加一个canvas元素来显示图表,并使用ViewChild装饰器来获取对该元素的引用:


这样,当窗口大小改变时,onResize方法将被调用,并调用this.chart.resize()来重新加载图表。

请确保在图表配置中正确设置图表的宽度和高度,以便在调整窗口大小时能够正确地重新加载图表。

相关内容

热门资讯

透视美元局!wepoker底牌... 透视美元局!wepoker底牌透视脚本怎样安装,we-poker辅助,教你教程(一贯真的是有挂);玩...
透视最新!wpk透视表,wep... 透视最新!wpk透视表,wepoker游戏下载,揭秘攻略(原生存在有挂);原来确实真的有挂(需添加指...
透视数据!wepoker底牌透... 透视数据!wepoker底牌透视脚本,wepoker辅助器有哪些功能,切实教程(本然真的有挂);值得...
透视美元局!wepoker辅助... 透视美元局!wepoker辅助器怎么用,we poker辅助器,微扑克教程(切实是真的有挂);实战中...
透视辅助!wpk辅助工具下载,... 透视辅助!wpk辅助工具下载,wepoker辅助透视软件,2025新版(原来存在有挂),亲,有的,a...
透视中牌率!wepoker辅助... 透视中牌率!wepoker辅助器怎么用,wepoker轻量版书签,2025新版教程(往昔有挂);免费...
透视教程!wpk有脚本吗,we... 透视教程!wpk有脚本吗,wepoker辅助器软件下载,新版2025教程(总是真的有挂)1、让任何用...
透视能赢!wepoker透视脚... 透视能赢!wepoker透视脚本免费下载,德扑圈透视,可靠技巧(切实存在有挂);免费wepoker透...
透视游戏!hhpoker辅助软... 透视游戏!hhpoker辅助软件,安装不了wepoker,安装教程(往昔是真的有挂);hhpoker...
透视规律!wepoker底牌透... 透视规律!wepoker底牌透视脚本怎样安装,wpk刷入池率脚本,2025新版教程(竟然是真的有挂)...