我正在尝试在我的angular 4应用程序中实现bellcurve highchart。我收到错误TypeError：调用series.map函数时p不是函数。当用数组数据初始化系列时，它非常奇怪。如果我将图表类型更改为直方图，但当我将类型更改为钟形曲线时，highchart有效。我使用了一个小提琴中的工作示例，并在我的应用程序中对其进行了尝试。如果您在下面的bellcurve组件代码中注意到，我已经在redraw方法中初始化了this.series，以覆盖我作为输入变量传递给该组件的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 { }
答案 0 :(得分：2)
也许您会怀疑以下代码：
services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); 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()
答案 1 :(得分：1)
require正在引起问题，请查看此函数：
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;
}