Angular ApexChart设置height=100%时无法渲染图表求助

问题根源 #

给元素设置height: 100%时，浏览器需要依赖父级容器的明确高度值才能计算出实际高度。如果父容器（包括app-root、body、html）的高度是默认的auto，图表容器的高度会被计算为0，最终只显示不依赖高度的导出图标。

修复方案 #

1. 给全局容器设置明确高度 #

在项目根目录的styles.css中添加以下样式，确保所有上层容器都有100%高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

app-root {
  display: block;
  height: 100%;
}

2. 修正图表容器样式 #

调整chartDiv的样式，补上缺失的单位并确保高度继承：

.chartDiv {
  margin: 2px;
  width: 95%;
  height: 100%;
}

3. 替代方案：使用视窗高度单位 #

如果不想修改全局样式，可以直接用vh（视窗高度）代替百分比，这样无需依赖父容器高度：

// 在app.component.ts的chart配置中修改
chart: {
  width: "100%",
  height: "95vh", // 直接占视窗高度的95%
  type: "bar"
}

4. 极端情况：强制图表重绘 #

如果以上方法无效，可在组件初始化后触发重绘：

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { ChartComponent } from "ng-apexcharts";

// ... 类型定义部分保持不变

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit {
  public chartOptions: ChartOptions;
  @ViewChild(ChartComponent) chart: ChartComponent;
  
  constructor() {
    // ... 初始化chartOptions的代码不变
  }

  ngAfterViewInit() {
    // 延迟触发重绘，确保DOM已渲染完成
    setTimeout(() => {
      this.chart.updateOptions(this.chartOptions);
    }, 100);
  }
}

验证效果 #

完成修改后，设置height:100%的图表应该能正常渲染，同时保持响应式布局，不会出现空白问题。

内容的提问来源于stack exchange，提问作者Rodney East