在angular4中实现HighCharts xrange

Question

我正在尝试使用xrange类型的HighCharts：

import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
import { HighchartsStatic } from '../../../../node_modules/angular2-highcharts/dist/HighchartsService';

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

  return hc;
} 
@NgModule({
  imports: [
    /* case 1 */
    ChartModule 
    // in this case the code compiles but I get Error 17 in console

    /* case 2 */
    /* ChartModule.forRoot(require('highcharts'), require('highcharts/modules/xrange')) */
    // in this case the code doesn't compiles with the error:
    // "Error encountered resolving symbol values statically. 
    //  Calling function 'ChartModule', function calls are not supported."
  ],
  providers: [
    {
        provide: HighchartsStatic,
        useValue: highcharts,
        useFactory: highchartsFactory
    }
})

正如在这两种情况下所显示的，我在创建图表时遇到问题。有人告诉我，第一种情况是更好的方法，我希望继续朝着这个方向发展。

我看到许多使用这种方法的帖子，但没有一个提到这个错误。

Answer 1

我建议你使用官方的highcharts npm包，就像在这个example中一样，但是你想使用angular2-highcharts。

更新你的app-module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';
import xrange from "highcharts/modules/xrange";
xrange(Highcharts);
Exporting(Highcharts);
export function highchartsFactory() {
  return Highcharts;
}
@NgModule({
  imports:      [ BrowserModule, FormsModule , ChartModule],
  declarations: [ AppComponent, HelloComponent ],
  providers: [
    { provide: HighchartsStatic, useFactory: highchartsFactory } // add as factory to your providers
  ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Stackblitz演示