HighCharts Wind Rose Chart“polar:真正的”不工作

wj8zmpe1  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(165)

我试图显示一个风玫瑰图为我的风速值。但是,我无法将其转换为极坐标图。
我正在使用Angular 12,并在我的Angular项目中安装了angular-highchartshighcharts
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。有没有什么是我遗漏的,或者是我犯的错误?

bkhjykvo

bkhjykvo1#

在组件顶部添加此解决了此问题。这可能不是正确的方法,但工作的变通办法,现在。

require('highcharts/modules/data')(Highcharts);
require('highcharts/modules/exporting')(Highcharts);
require('highcharts/modules/windbarb')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);

相关问题