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

在angular4中实现HighCharts-xrange

1 个答案: