Highcharts xrange系列抛出`x不是函数`

Question

我正在使用 Angular 4(Angular-cli) 环境并尝试使用 xrange 类型的 highcharts。

在运行 npm install 命令npm install highcharts --save 之后，我写了这几行代码：

import * as Highcharts from 'highcharts'; // importing highcharts
declare var require: any; // throws error if removed
require('highcharts/highcharts-more')(Highcharts); 
require('highcharts/modules/xrange')(Highcharts); 

require('highcharts/modules/xrange')(Highcharts); 行抛出 x is not a function 错误。

解决方案有什么方向吗？

---

更新

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from '../../../../node_modules/angular2-highcharts/dist/HighchartsService';
import { ChartForProjectComponent } from './components/chart-forProject/chart-forProject.component';
...

declare var require: any;

export function highchartsFactory() {
  const hc = require('highcharts');
  const dd = require('highcharts/modules/xrange');
  dd(hc);

  return hc;
}

@NgModule({
  declarations: [
      ChartForProjectComponent //this is the componnet that build the chart
  ],
  imports: [
      CommonModule,
      FormsModule,
      ChartModule
  ],
  providers: [
      {
        provide: HighchartsStatic,
        useFactory: highchartsFactory
      },
  ]
})
export class ProjectModule { }

这构建没有问题，但在运行时当我尝试构建图表时，我在控制台中收到此错误

ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
at Object.a.error (highcharts.js:10)
at a.Chart.initSeries (highcharts.js:245)
at highcharts.js:270
at Array.forEach (<anonymous>)
at a.each (highcharts.js:28)
at a.Chart.firstRender (highcharts.js:270)
at a.Chart.<anonymous> (highcharts.js:245)
at a.fireEvent (highcharts.js:31)
at a.Chart.init (highcharts.js:244)
at a.Chart.getArgs (highcharts.js:244)

Answer 1

您需要在 app.module.ts 中导入 angular2-highcharts

更多详情请查看：https://github.com/gevgeny/angular2-highcharts#setting-up

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular2-highcharts';
import { App } from './App';

@NgModule({
    imports: [
      BrowserModule, 
      ChartModule.forRoot(require('highcharts'))
    ],
    declarations: [App],
    bootstrap: [App]
})
export class AppModule {}

如果你想添加更多模块，你必须像这样在 forRoot 方法中添加

@NgModule({
    ...
    imports: [
      BrowserModule, 
      ChartModule.forRoot(
        require('highcharts'),
+       require('highcharts/highchart-3d'),
+       require('highcharts/modules/xrange')
      )
    ],
 providers: [
    {
      provide: HighchartsStatic,
      useValue: highcharts
    },
})