您可以使用Angular的@HostListener
装饰器来监听窗口大小的变化,并在窗口大小改变时重新加载图表。
首先,确保您已经安装了chart.js
和ng2-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()
来重新加载图表。
请确保在图表配置中正确设置图表的宽度和高度,以便在调整窗口大小时能够正确地重新加载图表。