Angular：如何解决google-charts组件百分比宽高初始化不生效问题

我使用Angular的google-charts组件，通过[dynamicResize]="dynamicResize"实现图表响应式，但该功能仅在宽高设为百分比且屏幕调整大小时生效，初始化时无法用百分比正常设置组件宽高。

尝试通过style="width: 100%; min-width: 500px; height: 500px;"初始化组件，但该样式仅在屏幕调整大小后才生效。

• 初始化状态：图表尺寸异常，未按百分比占满容器
• 屏幕调整后：图表正常占满容器宽度，符合样式设置

component.html #

<google-chart
    style="width: 100%; min-width: 500px; height: 500px;"
    [type]="type"
    [data]="data"
    [columns]="columnNames"
    [options]="options"
    [dynamicResize]="dynamicResize"
    [width]="width"
    [height]="height"
></google-chart>

component.ts #

// Chart configurations
type: any = 'ColumnChart'
data = [
  ['BRAZIL', 7153282.26, 6243680.89],
  ['CANADA', 3593833.71, 4759069.35],
  ['CHILE', 1363314.23, 1108712.94],
  ['MEXICO', 982280.00, 354999.48],
  ['PANAMA', 0.00, 0.00],
  ['UNITED STATES', 7592720.00, 5820093.76],
];
columnNames = ['Region', 'Budget', 'Closed'];
options = {
  vAxis: {
    format: 'short',
    gridlines: { color: '#CCCCCC', count: '4' },
    minorGridlines: { color: 'transparent' },
  },
  legend: {
    position: 'top',
    alignment: 'center'
  },
  chartArea:{ height:'80%', width: '70%' },
};
dynamicResize = true;
// 此处设置不生效
width: any = '100%';
height: any = '100%';

1. 移除[width]和[height]绑定 #

组件的[width]和[height]属性会优先覆盖style中的设置，且初始化时无法正确解析百分比值。直接删除这两个绑定，让style样式生效：

修改后的component.html：

<google-chart
    style="width: 100%; min-width: 500px; height: 500px;"
    [type]="type"
    [data]="data"
    [columns]="columnNames"
    [options]="options"
    [dynamicResize]="dynamicResize"
></google-chart>

2. 确保父容器有明确尺寸 #

百分比宽度依赖父容器的宽度，若父容器没有设置宽度，图表无法正确计算尺寸。给父元素添加样式：

.chart-container {
  width: 100%;
  /* 可选：添加最大宽度限制 */
  max-width: 1200px;
}

然后把google-chart放在这个容器内：

<div class="chart-container">
  <google-chart ...></google-chart>
</div>

3. 手动触发resize事件（可选） #

如果上述方法仍不生效，可在组件初始化完成后手动触发window resize事件，强制图表重新计算尺寸：

在component.ts中添加ngAfterViewInit钩子：

import { AfterViewInit } from '@angular/core';

export class YourChartComponent implements AfterViewInit {
  // ... 原有代码

  ngAfterViewInit(): void {
    // 延迟触发，确保图表已渲染完成
    setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 100);
  }
}

4. 调整chartArea配置（可选） #

确保chartArea的百分比是基于图表容器的尺寸，而非默认的固定值。可以保留原配置，但若出现内部区域缩放异常，可尝试改为相对值：

options = {
  // ... 其他配置
  chartArea: { height: '80%', width: '90%' },
};

内容的提问来源于stack exchange，提问作者Henrique Fernandez