我已经创建了angular 12应用程序,并尝试使用“ng 2-charts and 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>
请帮我解决这个问题
3条答案
按热度按时间jc3wubiy1#
在HTML模板中,应该将
[chartType]="barChartType"
替换为[type]="barChartType"
。有关详细信息,请参阅
ng2-charts
文档中的图表类型。mec1mxoz2#
我们需要使用**“type”**而不是“chartType”。
下面的代码可以用
details for the solution
zour9fqk3#
就这么说吧:
此外,如果图表类型为线:
等