Angular12中Highcharts设置polar:true风玫瑰极坐标不生效

用npm包模块化引入Highcharts时，极坐标（Polar）能力没有默认打包进核心库，你缺了手动注册极坐标模块的步骤。官方示例用script标签引入的是全量版本，默认带了极坐标模块所以直接写配置就能跑，你没注册模块的话，配置里写的polar: true不会生效，图表会直接降级渲染成普通直角坐标系的堆叠柱状图。

1. 在组件的ts文件顶部，补充引入并注册极坐标模块，注意要注册到你项目实际用到的Highcharts实例上：

// 你项目里原本的Highcharts引入
import * as Highcharts from 'highcharts';
// 新增以下两行
import PolarModule from 'highcharts/modules/polar';
PolarModule(Highcharts);

// 如果你是从angular-highcharts引入的Chart，也要确保上面的注册操作是针对同一个Highcharts实例执行的

2. 删掉所有series配置项里的type: undefined字段。你已经在chart全局配置里指定了type: 'column'，series里写undefined会覆盖全局配置，反而可能导致类型识别异常。
   修正后的series示例：

series: [
  {
    name: '<1 m/s',
    data: [1, 2, 3, 2, 1, 6, 8, 4, 0, 2, 7, 5, 2, 1, 4, 1]
  },
  {
    name: '1-3 m/s',
    data: [1, 2, 3, 0, 1, 0, 1, 0, 0, 2, 0, 1, 2, 4, 3, 1]
  },
  {
    name: '3-5 m/s',
    data: [1, 2, 3, 0, 1, 0, 0, 0, 1, 2, 1, 1, 2, 1, 1, 1]
  },
  {
    name: '>5 m/s',
    data: [1, 2, 3, 0, 1, 1, 0, 0, 0, 2, 3, 1, 2, 1, 1, 1]
  }
]

3. 给图表容器设置明确的宽高，避免极坐标图形渲染变形，在组件对应的样式文件里添加：

#container {
  width: 100%;
  min-height: 500px;
}

改完保存刷新页面，极坐标就会正常生效，16个方位刻度会均匀排布在圆周上，堆叠柱从圆心向外辐射，就是标准的风玫瑰样式了。

注意：Highcharts的非核心功能（极坐标、3D图表、导出功能、各种扩展图表类型）在模块化引入时都需要单独导入对应模块注册后才能使用，和全量script标签引入的逻辑不一样，这是模块化引入时最高发的配置遗漏问题。

内容的提问来源于stack exchange，提问作者Chew Hong Yu