将Google图表宽度设置为100%,页面调整大小为4+

Question

我有一个应用程序,有许多包装响应站点(一堆div从API预定义),每个都填充了谷歌图表.问题是,当页面首次加载时,图表将呈现为当前大小,并且当窗口调整大小时,只有包装器发生更改,而不是图表本身.

如何在不使用Jquery的情况下制作类似https://codepen.io/flopreynat/pen/BfLkA的内容 ,是否需要在Angular的特定生命周期中设置(例如onChange？)或仅仅是一个函数？我正在使用一个只检索数据的库,所以我没有这样的函数:

$(window).resize(function(){
  drawChart1();
  drawChart2();
});

Answer 1

以下是绑定窗口的方法:在Angular 4+中调整大小:

import {ElementRef, HostListener, ViewChild} from '@angular/core';
import {GoogleChartComponent} from 'ng2-google-charts';

...

export class YourChart {
  @ViewChild('chart') chart: GoogleChartComponent;
  ...
  @HostListener('window:resize', ['$event'])
  onWindowResize(event: any) {
    let selection = this.chart.wrapper.visualization.getSelection();
    this.chart.redraw();
    this.chart.wrapper.visualization.setSelection(selection);
    // you can remove two lines that preserve selection if you don't need them
  }
}