在我的应用程序中，我使用Angular 5的angular-highcharts。我尝试绘制框图，我得到以下错误：
ERROR Error: Highcharts error #17: www.highcharts.com/errors/17
at Object.a.error (highcharts.js:10)
at a.Chart.initSeries (highcharts.js:237)
at eval (highcharts.js:261)
at Array.forEach (<anonymous>)
at a.each (highcharts.js:27)
at a.Chart.firstRender (highcharts.js:261)
at a.Chart.init (highcharts.js:237)
at a.Chart.getArgs (highcharts.js:236)
at new a.Chart (highcharts.js:235)
at a.chart (highcharts.js:235)
我尝试使用https://www.highcharts.com/demo/box-plot上提供的相同示例数据。许多其他图表似乎都有效。我有以下配置：
@ angular / cdk：5.2.2 @ angular / cli：1.7.3
“angular-highcharts”：“^ 5.2.11”， “highcharts”：“^ 6.0.7”，
以下是我的组件文件的源代码
import { Component, OnInit, Input } from '@angular/core';
import { Chart } from 'angular-highcharts';
@Component({
selector: 'app-box-plot',
templateUrl: './box-plot.component.html',
styleUrls: ['./box-plot.component.css']
})
export class BoxPlotComponent implements OnInit {
@Input()
option: any;
chart: Chart;
constructor() {
this.option = {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
},
plotLines: [{
value: 932,
color: 'red',
width: 1,
label: {
text: 'Theoretical mean: 932',
align: 'center',
style: {
color: 'gray'
}
}
}]
},
series: [{
name: 'Observations',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
}, {
name: 'Outlier',
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 644],
[4, 718],
[4, 951],
[4, 969]
],
marker: {
fillColor: 'white',
lineWidth: 1
},
tooltip: {
pointFormat: 'Observation: {point.y}'
}
}]
};
this.chart = new Chart(this.option);
}
ngOnInit() {
}
}