使用require的Angular4 Highcharts TypeError

时间:2017-10-03 12:25:31

标签: javascript angular highcharts heatmap angular2-highcharts

我正在使用Angular4和angular2-highcharts。根据文档,我需要包含带有require属性的highcharts模块。它适用于包含highcharts模块,但不适用于附加模块(highcharts-more,highmaps等)。当我包含更多的highcharts模块时,我会收到如下错误:

TypeError: n is not a function
TypeError: n is not a function
    at highcharts-more.js:8
    at highcharts-more.js:11

我需要实现一个现在不能正常工作的热图,因为它使用了额外的模块。不知道怎么解决这个问题?

这是我的app.module.ts代码

   // solution for angular not picking up required attribute
    declare const require: any;
    export function highchartsFactory() {
      let hc = require('highcharts');
      let hex = require('highcharts/modules/exporting');
      let hmod = require('highcharts/highcharts-more');
      hex(hc);
      hmod(hex);
      return hc;
    }

    imports: [
        ChartModule,
      ],
    providers: [
    {
      provide: HighchartsStatic,
      useFactory: highchartsFactory
    }
   ]

2 个答案:

答案 0 :(得分:0)

heatmap系列类型不在highcharts-more文件中。所需文件为heatmap - 如本演示所示:

http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/heatmap/

并在文档中解释:

https://www.highcharts.com/docs/chart-and-series-types/heatmap

答案 1 :(得分:0)

我通过在app.module.ts

中执行以下操作解决了这个问题
declare const require: any;
export function highchartsFactory() {
  let Highcharts = require('highcharts');
  let Heatmap = require('highcharts/modules/heatmap');
  Heatmap(Highcharts);
  return Highcharts;
}