在Ionic中使用ng2-highcharts仪表盘遇Error #17问题求助

我之前也碰到过一模一样的情况！你已经按常规步骤配置好ng2-highcharts，基础图表能正常运行，但一用仪表盘（Gauge）就弹出Error: Highcharts error #17，这个错误的核心原因很明确：仪表盘属于Highcharts的扩展图表类型，核心包默认不包含该模块，必须手动引入对应的扩展文件。

下面是具体的解决步骤：

1. 确保安装完整的Highcharts依赖 #

如果之前只装了ng2-highcharts，建议补充安装完整的Highcharts包（里面包含所有扩展模块），执行命令：

npm install highcharts --save

2. 在组件中按需引入扩展模块 #

在你要使用仪表盘的组件.ts文件顶部，添加以下引入代码——重点是加载highcharts-more模块（仪表盘依赖它），如果是3D实心仪表盘，还需要额外引入solid-gauge模块：

import * as Highcharts from 'highcharts';
// 引入仪表盘依赖的核心扩展模块
require('highcharts/highcharts-more')(Highcharts);
// 如果使用实心仪表盘，取消下面这行注释
// require('highcharts/modules/solid-gauge')(Highcharts);

3. 正常配置并渲染仪表盘 #

接下来就可以按照Highcharts的官方规范编写仪表盘的配置项了，举个简单的示例：

// 组件类中定义图表配置
chartOptions = {
  chart: {
    type: 'gauge'
  },
  title: {
    text: '设备转速'
  },
  pane: {
    startAngle: -150,
    endAngle: 150
  },
  yAxis: {
    min: 0,
    max: 1000,
    plotBands: [
      { from: 0, to: 600, color: '#55BF3B' },
      { from: 600, to: 800, color: '#DDDF0D' },
      { from: 800, to: 1000, color: '#DF5353' }
    ]
  },
  series: [{
    name: '转速',
    data: [750],
    tooltip: {
      valueSuffix: ' r/min'
    }
  }]
};

然后在组件的模板文件中使用ng2-highcharts的组件：

<chart [options]="chartOptions"></chart>

错误原因补充说明 #

Highcharts的核心库只包含折线图、柱状图这类基础图表类型，像仪表盘、雷达图这类特殊图表都属于扩展模块，必须先加载对应的依赖文件，否则Highcharts无法识别gauge这个图表类型，就会抛出Error #17（未定义的图表类型）。

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