Ошибка angular2-highcharts: «Диаграмма неизвестного типа»

Я пытаюсь отобразить простую диаграмму в своем приложении Angular 2, но всегда выдает следующую ошибку:

введите здесь описание изображения

Вот мой 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;

Любые идеи? Большое спасибо.


angular highcharts angular2-highcharts gauge
person B. Ciervo    schedule 01.03.2017    source источник
comment
См. проблему на angular2-highcharts github. Это должно помочь вам решить проблему github.com/gevgeny/angular2-highcharts/issues/86.   -  person morganfree    schedule 01.03.2017
comment
Нет, к сожалению, я думаю, что это относится к старой версии компонента, он использует файлы, которых сейчас нет в установке angular2-highcharts.   -  person B. Ciervo    schedule 06.03.2017
comment
Привет, @B.Ciervo, ты нашел решение этой проблемы? Я также застрял в том же самом. Было бы здорово, если бы вы могли опубликовать какое-либо обновление, если вы нашли какое-либо решение. Спасибо.   -  person BeingSuman    schedule 11.08.2017
comment
Привет, к сожалению не смог. В конце концов я перешел к другому решению, используя другой компонент highchart.   -  person B. Ciervo    schedule 21.08.2017
comment
Не могли бы вы объяснить, как исправить эту проблему с диаграммой   -  person Yokesh Varadhan    schedule 19.09.2017

Ответы (1)


arrow_upward
4
arrow_downward

Я столкнулся с этой проблемой пару дней назад и после ссылки на эту тему я нашел решение, и эта конфигурация теперь работает для меня:

//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 { }
person sachin sehgal    schedule 30.08.2018