TypeError: p не является функцией при вызове функции карты в angular 4 для извлечения ряда для высокоскоростной диаграммы bellcurve

Question

Я пытаюсь реализовать высокоуровневую диаграмму колокольчиков в своем угловом приложении 4. Я получаю ошибку TypeError: p не является функцией при вызове функции series.map. Это довольно странно, поскольку ряды инициализируются данными массива. Старшая диаграмма работает, если я изменяю тип диаграммы на гистограмму, но терпит неудачу, когда я изменяю тип на колокольню. Я использовал рабочий пример из скрипки и опробовал его в своем приложении. Если вы заметили в коде компонента bellcurve ниже, я инициализировал this.series в методе redraw, чтобы переопределить объект серии, который я передаю в качестве входной переменной этому компоненту. Не уверен, что проблема в том, как это работает, когда я меняю тип на гистограмму в объекте серии.

Код скрипки

http://jsfiddle.net/zrny2kwj/1/

Код компонента Bell Curve

    import { Component, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { ShortNumberFormatPipe } from '@wtw/toolkit';

@Component({
    selector: 'bellcurvechart',
    template: '<chart [options]="options" (load)="getInstance($event.context)"></chart>',
    styles: [`
        chart{
              display: block;
              width: 100% !important;
              padding:0;
        }
    `]
})
export class BellCurveChartComponent implements OnInit {
    static data: Array<number>=[3.5, 3, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3, 3, 4, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3, 3.8, 3.2, 3.7, 3.3, 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2, 3, 2.2, 2.9, 2.9, 3.1, 3, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3, 2.8, 3, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3, 3.4, 3.1, 2.3, 3, 2.5, 2.6, 3, 2.6, 2.3, 2.7, 3, 2.9, 2.9, 2.5, 2.8, 3.3, 2.7, 3, 2.9, 3, 3, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3, 2.5, 2.8, 3.2, 3, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3, 2.8, 3, 2.8, 3.8, 2.8, 2.8, 2.6, 3, 3.4, 3.1, 3, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3, 2.5, 3, 3.4, 3];

    static chart(shortNumberFormatPipe: ShortNumberFormatPipe, translate: TranslateService, localizedLabel: string, graphLegendTitle: string) {
        return {
         title: {
        text: 'Highcharts Histogram'
    },
    xAxis: [{
        title: { text: 'Data' },
        alignTicks: false
    }, {
        title: { text: 'Histogram' },
        alignTicks: false,
        opposite: true
    }],

    yAxis: [{
        title: { text: 'Data' }
    }, {
        title: { text: 'Histogram' },
        opposite: true
    }],

    series: [{
        name: 'Histogram',
        type: 'bellcurve',
        xAxis: 1,
        yAxis: 1,
        baseSeries: 's1',
        zIndex: -1
    }, {
        name: 'Data',
        type: 'scatter',
        data: this.data,
        visible: false,
        id: 's1',
        marker: {
            radius: 1.5
        }

    }]
        };
    }
    public options: any;
    chart: any;
    @Input() localizedLabel: string;
    @Input() public series: any;
    @Input() usedInPdf: boolean = false;
    private shortNumberFormatPipe = new ShortNumberFormatPipe();

    constructor(private _translate: TranslateService) {
    }

    ngOnInit() {
        let graphLegendTitle: string = this._translate.instant('CAPTIVES.RESULTS.COMMON.GRAPH_LEGEND_TITLE');
        if (this.usedInPdf) {
            graphLegendTitle = '';
        }
        this.options =BellCurveChartComponent.chart(this.shortNumberFormatPipe, this._translate, this.localizedLabel, graphLegendTitle);
    }

    getInstance(chartInstance): void {
        this.chart = chartInstance;
      //  this.redraw();
    }

    ngOnChanges(data: any) {
        if (!data.series.currentValue || !this.chart) return;
    //    this._redrawLogic(data.series.currentValue);
    //    this.chart.reflow();
    }

     public redraw() {
        if (!this.chart) return;
         this._redrawLogic(this.series);
       this.chart.redraw();
    }

    private _redrawLogic(series1: any) {


        let seriesLength = this.chart.series.length;
        for (let i = seriesLength - 1; i > -1; i--) {
            this.chart.series[i].remove();
        }

        console.log(series1);

        series1.map(s => {
             if (s !== null) {
                this.chart.addSeries(s);
             }
        });

        for (let i = 0; i < this.chart.series.length; i++) {
            if (i > 0) {
                this.chart.series[i].setVisible(false, false);
            } else {
                this.chart.series[i].setVisible(true, true);
            }
        }
    }
}

app.module

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

    export function highchartsFactory() {
      const hc = require('highcharts');
      const hb = require('highcharts-histogram-bellcurve');
      const dd = require('highcharts/modules/drilldown');
      const hcMore = require('highcharts/highcharts-more');
      const exp = require('highcharts/modules/exporting');
      hcMore(hc);
      hb(hc);
      dd(hc);
      exp(hc);
      return hc;
    }

@NgModule({
  declarations: [...ROOT_COMPONENTS ],
  imports: [
    PlatformRootModule.forRoot([
       { provide: ExtensionPoint.RUN_PAGES, useValue: { routes: Routing.RUN_PAGES } },
       { provide: ExtensionPoint.RUN_MANAGEMENT_PAGES, useValue: { routes: Routing.RUN_MGMT_PAGES } },
       { provide: ExtensionPoint.RUN_LIST_NAVIGATION, useValue: { runLinks: Config.RUN_LIST_NAVIGATION } }
      ]
    ),
    ChartModule
  ],
  providers: [...WEBAPI_PROVIDERS, ...SERVICES, {
        provide: HighchartsStatic,
        useFactory: highchartsFactory
    }, { provide: RunIntegrationService, useClass: RunIntegrationCaptivesService }],
  bootstrap: [PlatformRootComponent],
  entryComponents: [...ROOT_COMPONENTS]
})
export class AppModule { }

Answer 1

require, используемые в функции highchartsFactory, создают проблему. Пожалуйста, просмотрите эту функцию:

export function highchartsFactory() {
          const hc = require('highcharts');
          const hb = require('highcharts-histogram-bellcurve');
          const dd = require('highcharts/modules/drilldown');
          const hcMore = require('highcharts/highcharts-more');
          const exp = require('highcharts/modules/exporting');
          hcMore(hc);
          hb(hc);
          dd(hc);
          exp(hc);
          return hc;
        }

Answer 2

Возможно, вы можете заподозрить следующие коды:

legendItemClick: function() {
                            for (let i = 0; i < this.chart.series.length; i++) {
                                if (this.chart.series[i].index !== this.index) {
                                    this.chart.series[i].setVisible(false, false);
                                } else {
                                    this.chart.series[i].setVisible(true, false);
                                }
                            }
                            this.chart.redraw();
                            return false;
                        }

this относится к функции, а не к компоненту. Вместо этого вы можете заменить function() на () =>