无法绑定到“chartType”，因为它不是 angular12 的“canvas”的已知属性

Question

我已经创建了 Angular 12 应用程序，并尝试使用“ng2-charts 和 Chart.js”将条形图包含在我的应用程序中

我已在 app.module.js 和 component.module.js 文件中导入了 NgChartsModule 。但是，我仍然面临以下错误

“无法绑定到‘chartType’，因为它不是‘canvas’的已知属性”

Package.json

"dependencies": {
"@angular/animations": "~12.2.0",
"@angular/common": "~12.2.0",
"@angular/compiler": "~12.2.0",
"@angular/core": "~12.2.0",
"@angular/forms": "~12.2.0",
"@angular/platform-browser": "~12.2.0",
"@angular/platform-browser-dynamic": "~12.2.0",
"@angular/router": "~12.2.0",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.5.1",
"ng2-charts": "^3.0.0-rc.5",
"rxjs": "~6.6.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"

}

mycomponent.module.ts

import { Component, OnInit } from '@angular/core';
import { ChartDataset, ChartOptions, ChartType } from 'chart.js';
import { NgChartsModule } from 'ng2-charts'


@Component({
selector: 'app-expence-manipulation',
templateUrl: './expence-manipulation.component.html',
styleUrls: ['./expence-manipulation.component.css']
})
export class ExpenceManipulationComponent implements OnInit {

constructor() { }

ngOnInit(): void {
}

public barChartOptions: ChartOptions = {
   responsive: true,
};
public barChartLabels = ['2006', '2007', '2008', '2009', '2010', 
'2011', '2012'];
public barChartType: ChartType = 'bar';
public barChartLegend = true;
public barChartPlugins = [];

public barChartData: ChartDataset[] = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { ExpenceManipulationComponent } from './expence- 
manipulation/expence-manipulation.component';
import { ExpenceInclusionComponent } from './expence-inclusion/expence- 
inclusion.component';
import { NgChartsModule } from 'ng2-charts';

@NgModule({
declarations: [
AppComponent,
ExpenceManipulationComponent,
ExpenceInclusionComponent
],
imports: [
BrowserModule,
NgChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

myapp.component.html

 <div style="display: block;">
            <canvas baseChart 
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [plugins]="barChartPlugins"
            [legend]="barChartLegend"
            [chartType]="barChartType">
          </canvas>
        </div>

请帮我解决这个问题

Answer 1

在 HTML 模板中，您应该将

[chartType]="barChartType"

替换为

[type]="barChartType"

。

有关更多信息，请参阅 ng2-charts 文档中的

图表类型

。

Answer 2

我们需要使用 “type” 而不是“chartType”。

以下代码有效

 <div style="display: block;">
        <canvas baseChart 
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [plugins]="barChartPlugins"
        [legend]="barChartLegend"
        **[type]**="barChartType">
      </canvas>
    </div>

解决方案详情

Answer 3

就这么说吧：

[type]="'bar'"

另外，如果图表类型是折线：

[type]="'line'"

等等。