TypeError: p is not a function while calling map function in angular 4 for fetching series for bellcurve highchart

Question

我正在尝试在我的 Angular 4 应用程序中实现 bellcurve highchart。我收到错误 TypeError: p is not a function in when calling series.map 函数。这很奇怪，因为系列是用数组数据初始化的。如果我将图表类型更改为直方图，但当我将类型更改为钟形曲线时失败，highchart 有效。我使用了 fiddle 中的一个工作示例，并在我的应用程序中进行了尝试。如果您在下面的 bellcurve 组件代码中注意到，我已经在 redraw 方法中初始化了 this.series 以覆盖我作为输入变量传递给该组件的系列对象。当我在系列对象中将类型更改为直方图时，不确定问题是什么。

小提琴代码

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

钟形曲线组件代码

    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

也许，你可以怀疑以下代码：

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() 替换为() =>

Answer 2

require's used in highchartsFactory function is created the problem, please review this function :

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;
        }