Angular ng2-charts Radarchart startAngle 编译错误

Question

我正在使用 ng2-charts 和 chartjs 添加 RadarChart 到一个简单的 angular 应用程序。该图正在按应有的方式呈现，但我需要旋转该图，并且在添加 startAngle 时出现编译错误。

这是我收到的错误：

Object literal may only specify known properties, and 'startAngle' does not exist in type '_DeepPartialObject<{ type: "radialLinear"; } & CoreScaleOptions & { animate: boolean; angleLines: { display: boolean; color: Scriptable<Color, ScriptableScaleContext>; lineWidth: Scriptable<...>; borderDash: Scriptable<...>; borderDashOffset: Scriptable<...>; }; ... 7 more ...; ticks: TickOptions & { ...; }; }>'.
#18 53.97 
#18 53.97 45                 startAngle: 28,
#18 53.97                    ~~~~~~~~~~~~~~
#18 53.97 
#18 53.97   node_modules/chart.js/types/utils.d.ts:15:30
#18 53.97     15 type _DeepPartialObject<T> = { [P in keyof T]?: DeepPartial<T[P]> };
#18 53.97                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#18 53.97     The expected type comes from property 'r' which is declared here on type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<"radialLinear" | keyof CartesianScaleTypeRegistry>; }>'

我相信我已经正确添加了所有用于 RadialLinearScale 的选项。

代码如下所示：

    import { Component, OnInit } from '@angular/core';
    import { AccountsService } from 'src/app/services/accounts.service';
    import { AuthenticationService } from 'src/app/services/authentication.service';
    import { environment } from '../../environments/environment';
    import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
    
    @Component({
      selector: 'app-users',
      templateUrl: './users.component.html',
      styleUrls: ['./users.component.css']
    })
    export class usersComponent implements OnInit {
    
        public radarChartOptions: ChartConfiguration['options'] = {
            responsive: true,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',        
            scales: {
                r: {
                    startAngle: 28,
                    suggestedMax: 4,
                    suggestedMin: 2,
                    max: 4,
                    min: 2,
                    ticks: {
                        stepSize: 0.5,
                        maxTicksLimit: 3,
                        display: false
                    },
                    pointLabels: {
                        font: {
                            family: 'Open Sans',
                            weight: 'bold',
                            size: 12
                        },
                        color: 'black'
                    },
                    angleLines: {
                        lineWidth: 2,
                        display: true
                    }
                }            
            },
            elements: {
                line: {
                  borderWidth: 3
                }
            }
        };
    
        public radarChartData: ChartData<'radar'>;
        public radarChartType: ChartType = 'radar';
        public radarChartLegend = false;
    
        public radarChartLabels: string[] = [
            'Data 1',
            'Data 2',
            'Data 3',
            'Data 4',
            'Data 5',
            'Data 6'
        ];

    constructor(private Account: AccountsService, private Auth: AuthenticationService) {
    }

    ngOnInit() {
      loadRadarGraph();
    }

    loadRadarGraph() {

            this.radarChartData = {
                labels: this.radarChartLabels,
                datasets: [
                { data: [1, 1, 1, 2, 1, 2],
                    label: 'My data'
                } ] };
    }
}

是否有人知道可能导致此问题的已知问题？

Answer 1

这是 chart.js 中的错误，已放入 pr 进行修复，因此您需要等待 chart.js 的下一个版本（3.7.1 之后）。与此同时，你唯一能做的就是在它上面放一个@ts-ignore

Angular ng2-charts Radarchart startAngle 编译错误

Angular ng2-charts Radarchart compile error for startAngle

chart.js

ng2-charts

angular