Angular 5中Highcharts TreeMap渲染失败求助（Error#17）

Hey there! 我知道你在Angular 5项目里用Highcharts TreeMap时碰到了Error #17的问题，这大概率是因为TreeMap属于Highcharts的扩展模块，没有正确导入导致的——毕竟折线图这类基础图表是核心包自带的，所以能正常渲染。下面给你一个完整可运行的示例，一步步解决问题：

1. 安装适配Angular 5的依赖包 #

Angular 5属于较老版本，得搭配对应版本的Highcharts包才能兼容，执行下面的命令安装：

npm install highcharts@6.2.0 highcharts-angular@2.4.0 --save

2. 编写TreeMap组件代码 #

创建一个treemap.component.ts文件，重点是必须导入并初始化TreeMap模块——这是解决Error #17的核心：

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
// 导入TreeMap扩展模块
import TreemapModule from 'highcharts/modules/treemap';

// 初始化TreeMap模块，把它注入到Highcharts实例中
TreemapModule(Highcharts);

@Component({
  selector: 'app-treemap',
  template: '<div id="treemap-container" style="width: 100%; height: 400px;"></div>'
})
export class TreemapComponent implements OnInit {

  ngOnInit(): void {
    // 配置并渲染TreeMap图表
    Highcharts.chart('treemap-container', {
      series: [{
        type: 'treemap',
        layoutAlgorithm: 'squarified', // 可选布局算法，还有'striped'等类型
        data: [
          { name: '分类A', value: 8, color: '#FF6384' },
          { name: '分类B', value: 6, color: '#36A2EB' },
          { name: '分类C', value: 4, color: '#FFCE56' },
          { name: '分类D', value: 3, color: '#4BC0C0' },
          { name: '分类E', value: 2, color: '#9966FF' }
        ]
      }],
      title: {
        text: 'TreeMap 示例图表'
      }
    });
  }
}

3. 在模块中注册组件 #

打开你的app.module.ts，把TreeMap组件加入到声明数组里：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreemapComponent } from './treemap.component'; // 引入组件

@NgModule({
  declarations: [
    AppComponent,
    TreemapComponent // 声明组件
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. 在页面中使用组件 #

修改app.component.html，添加TreeMap组件的标签：

<div style="padding: 20px;">
  <h2>Angular 5 + Highcharts TreeMap 演示</h2>
  <app-treemap></app-treemap>
</div>

为什么会出现Error #17？ #

Error #17是Highcharts的「未知图表类型」错误，本质原因是：

• 折线图、柱状图这类基础图表属于Highcharts核心包自带的类型，无需额外导入模块
• TreeMap是扩展模块，不在核心包里，必须手动导入并调用模块函数初始化Highcharts实例，否则Highcharts识别不了treemap这个类型

现在运行你的Angular项目，TreeMap应该就能正常渲染啦！

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