angular2-highcharts错误：“图表类型未知”

Question

我试图在我的Angular 2应用程序中显示一个简单的highchart，但它总是给我以下错误：

​

​

这是我的app.module.ts：

import { ChartModule } from 'angular2-highcharts';

@NgModule({
  imports: [
    ChartModule.forRoot('highcharts')
  ]
})
export class AppModule {
}

我的sistemjs.config.js：

    map: {
        'angular2-highcharts': 'npm:angular2-highcharts',
        'highcharts': 'npm:highcharts'
    },
    packages: {
        highcharts: {
            main: './highcharts.js',
            defaultExtension: 'js'
        },
        'angular2-highcharts': {
            main: './index.js',
            defaultExtension: 'js'
        }            
    }

并且，在我的组件中：

import { Component } from '@angular/core';
import { ChartModule } from 'angular2-highcharts';

@Component({
  selector: 'highchart',
  template: '<chart [options]="options">'
})

constructor() {
    this.options = {
        title : { text : 'angular2-highcharts example' },
        series: [{
            name: 's1',
            data: [2,3,5,8,13],
            allowPointSelect: true
        },{
            name: 's2',
            data: [-2,-3,-5,-8,-13],
            allowPointSelect: true
        }]
    };

    console.log(this.options);
} 
options: Object;

有什么想法吗？非常感谢。

Answer 1

几天前我遇到了这个问题，在参考了this thread之后，我找到了一个解决方案，现在这个配置对我来说是有效的：

//other important imports
import { ChartModule } from 'angular2-highcharts';
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';

declare var require: any;
export function highchartsFactory() {
  const hc = require('highcharts');
  const hm = require('highcharts/highcharts-more');
  const mr = require('highcharts/modules/solid-gauge');
  mr(hc);
  hm(hc);
  return hc;
  }

@NgModule({
  declarations: [
//===== your declarations =====
  ],
  imports: [
 //your other imports goes here
    ChartModule     //------------> important import just chart module
  ],
  providers: [{
    provide: HighchartsStatic,               //-----> and this too
    useFactory: highchartsFactory
  }],
  bootstrap: [AppComponent]
})
export class AppModule { }