如何在Angular 9中使用Highcharts stacked bar？求可用示例

网上多数教程失效的核心原因是依赖版本不匹配，高版本的Highcharts Angular封装包不再支持Angular 9，以下是经过验证的可运行实现步骤：

第一步：安装兼容版本依赖 #

执行以下命令安装适配Angular 9的包版本，不要直接安装latest版本：

npm install highcharts@9.3.3 highcharts-angular@2.10.0 --save

注意：highcharts-angular@3.x及以上版本最低要求Angular 12运行环境，在Angular 9中安装会直接触发编译报错

第二步：模块注册 #

在需要使用图表的业务模块（例如根模块app.module.ts）中导入Highcharts的Angular封装模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入Highcharts图表模块
import { HighchartsChartModule } from 'highcharts-angular';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HighchartsChartModule // 添加到导入数组
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三步：组件逻辑编写 #

在对应组件的ts文件中编写堆叠条形图配置，注意显式指定每个数据系列的类型，避免类型校验报错：

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-stacked-bar-demo',
  templateUrl: './stacked-bar-demo.component.html'
})
export class StackedBarDemoComponent {
  // 挂载Highcharts实例
  Highcharts: typeof Highcharts = Highcharts;
  // 图表更新触发标识
  updateFlag = false;
  // 堆叠条形图完整配置
  chartOptions: Highcharts.Options = {
    chart: {
      type: 'bar' // bar为横向条形图，column为纵向柱状图，按需选择
    },
    title: {
      text: '季度各产品线销售额堆叠统计'
    },
    xAxis: {
      categories: ['一季度', '二季度', '三季度', '四季度']
    },
    yAxis: {
      min: 0,
      title: {
        text: '销售额（万元）'
      }
    },
    legend: {
      reversed: true
    },
    plotOptions: {
      series: {
        stacking: 'normal' // 普通堆叠传'normal'，百分比堆叠传'percent'
      }
    },
    series: [
      {
        name: '产品线A',
        type: 'bar',
        data: [120, 180, 150, 220]
      },
      {
        name: '产品线B',
        type: 'bar',
        data: [90, 130, 170, 190]
      },
      {
        name: '产品线C',
        type: 'bar',
        data: [60, 80, 110, 140]
      }
    ]
  };
}

第四步：模板渲染 #

在组件对应的html模板中添加图表容器标签，必须显式设置容器高度，否则图表会因高度为0无法显示：

<highcharts-chart
  [Highcharts]="Highcharts"
  [options]="chartOptions"
  [(update)]="updateFlag"
  style="width: 100%; height: 450px; display: block;"
></highcharts-chart>

常见运行异常排查 #

• 依赖版本不匹配：优先核对highcharts-angular版本是否为2.x系列，高版本无法在Angular 9下运行
• 系列类型缺失：每个series必须显式声明type: 'bar'，否则会触发TypeScript类型校验错误
• 堆叠配置位置错误：stacking属性需要写在plotOptions.series或plotOptions.bar下，不要直接写在chart根配置中
• 容器样式问题：必须给highcharts-chart标签设置明确的高度值，不要依赖默认高度

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