在 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

我建议你像example那样使用官方的highcharts npm包，但你想使用angular2-highcharts。

更新你的应用模块

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演示