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
    },
})

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

1 个答案: