Angular中Highcharts图表如何按百分比设置宽高？

我之前也碰到过一模一样的情况，固定像素的宽高完全没法满足自适应需求，咱们可以通过调整容器样式+移除Highcharts的固定尺寸设置来搞定：

第一步：移除ChartOptions中的固定宽高 #

先把你chartOptions里chart对象下的width和height删掉，这俩属性会强制图表用固定像素尺寸，直接覆盖容器的自适应设置：

chartOptions: Options = { 
  title: { 
    text: 'CDF of the most frequent update frequency', 
    style: { color: 'whitesmoke' } 
  }, 
  chart: { 
    zoomType: 'x', 
    backgroundColor: { 
      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 }, 
      stops: [ [0, '#2a2a2b'], [1, '#3e3e40'] ] 
    }, 
    borderColor: 'black', 
    borderWidth: 2 
    // 删掉width和height，让图表依赖容器尺寸自适应
  }
}

第二步：给模态框内容和图表容器设置CSS样式 #

Highcharts的尺寸完全由它的父容器决定，所以得确保父容器（mat-dialog-content和highcharts-chart元素）能占满模态框的可用空间。在你的组件样式文件里加以下代码：

/* 清空模态框内容区域的默认内边距，让它占满模态框剩余空间 */
mat-dialog-content {
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 强制图表容器为块级元素，确保它能占满父容器的全部宽高 */
highcharts-chart {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

第三步：配置模态框的初始尺寸（可选） #

如果希望模态框本身也能适配视口，可以在打开模态框的时候设置尺寸参数：

// 示例：打开模态框的代码
this.dialog.open(YourChartDialogComponent, {
  width: '90vw', // 占视口宽度的90%
  height: '90vh', // 占视口高度的90%
  maxWidth: '100vw',
  maxHeight: '100vh'
});

原理说明 #

Highcharts默认会自动适配容器尺寸，只要容器的宽高是可计算的（比如百分比、视口单位），且图表本身没设固定宽高，就会自动撑满容器。加!important是为了覆盖Highcharts生成的内联样式，确保咱们的样式生效。

这样设置完，图表就会自动占满模态框空间，窗口大小变化时也会跟着自适应调整啦！

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