我试图显示一个风玫瑰图为我的风速值。但是,我无法将其转换为极坐标图。
我正在使用Angular 12,并在我的Angular项目中安装了angular-highcharts和highcharts。
Component.ts
this.windchart = new HighChart.Chart({
series: [
{
type: undefined,
name: '<1 m/s',
data: [1, 2, 3, 2, 1, 6, 8, 4, 0, 2, 7, 5, 2, 1, 4, 1]
},
{
type: undefined,
name: '1-3 m/s',
data: [1, 2, 3, 0, 1, 0, 1, 0, 0, 2, 0, 1, 2, 4, 3, 1]
},
{
type: undefined,
name: '3-5 m/s',
data: [1, 2, 3, 0, 1, 0, 0, 0, 1, 2, 1, 1, 2, 1, 1, 1]
},
{
type: undefined,
name: '>5 m/s',
data: [1, 2, 3, 0, 1, 1, 0, 0, 0, 2, 3, 1, 2, 1, 1, 1]
}
],
chart: {
polar: true,
type: 'column'
},
title: {
text: this.location,
align: 'center'
},
subtitle: {
text: 'Test Graph',
align: 'center'
},
pane: {
size: '85%'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 100,
layout: 'vertical'
},
xAxis: {
tickmarkPlacement: 'on',
categories: ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW']
},
yAxis: {
min: 0,
endOnTick: false,
showLastLabel: true,
title: {
text: 'Frequency (%)'
},
labels: {
formatter: function () {
return this.value + '%';
}
},
reversedStacks: false
},
tooltip: {
valueSuffix: '%'
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
// groupPadding: 0,
pointPlacement: 'on'
}
}
});
Component.html
<div [chart]="windchart" id="container"></div>
图表显示为柱形图,但未将其更改为极坐标图。
我指的是highcharts演示https://www.highcharts.com/demo/polar-wind-rose
唯一的区别可能是演示使用script标签,而我通过npm包实现Highcharts。有没有什么是我遗漏的,或者是我犯的错误?
1条答案
按热度按时间bkhjykvo1#
在组件顶部添加此解决了此问题。这可能不是正确的方法,但工作的变通办法,现在。