[英]PrimeNG chart js is not rendering
我在 angular 组件中显示 chart-js 时遇到问题:类型栏的图表未显示,我将其作为 html 渲染:
<div _ngcontent-tkd-c175="" class="p-col-6">
<p-chart _ngcontent-tkd-c175="" type="bar">
</p-chart></div>
我的模块:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {KpisComponent} from './kpis.component';
import {BrowserModule} from '@angular/platform-browser';
import {
ChartModule
} from 'primeng/chart';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {ButtonModule} from "primeng/button";
@NgModule({
declarations: [KpisComponent],
imports: [
CommonModule,
BrowserModule,
BrowserAnimationsModule,
ChartModule,
ButtonModule
]
})
export class KpisModule { }
我的组件的 html:
<div class="p-col-6">
<p-chart #chart type="bar" [data]="dataSource"></p-chart>
</div>
<button type="button" pButton (click)="update($event)" >Update</button>
我的组件 ts
import {UIChart} from "primeng/chart";
@Component({
selector: 'app-kpis',
templateUrl: './kpis.component.html',
styleUrls: ['./kpis.component.scss']
})
export class KpisComponent implements OnInit {
@ViewChild('chart') chart: UIChart;
public dataSource = {} as any;
public options: any;
constructor(
private kpisService: KpisService
) {
}
ngOnInit(): void {
this.options = {
title: {
display: true,
text: 'My Title',
fontSize: 16
},
legend: {
position: 'bottom'
}
};
}
update($event: MouseEvent) {
this.dataSource = {
labels: ["2015", "2016", "2017", "2018", "2019", "2020"],
datasets: [{
label: "Company1",
data: [25, 30, 60, 50, 80, 90]
},
{
label: "Company2",
data: [45, 33, 70, 72, 95]
}
]
};
}
}
我的 package.json 依赖项:
"dependencies": {
"@angular-material-components/datetime-picker": "^6.0.3",
"@angular/animations": "~11.1.0",
"@angular/cdk": "~11.1.0",
"@angular/common": "~11.1.0",
"@angular/compiler": "~11.1.0",
"@angular/core": "~11.1.0",
"@angular/forms": "~11.1.0",
"@angular/material": "^12.1.3",
"@angular/platform-browser": "~11.1.0",
"@angular/platform-browser-dynamic": "~11.1.0",
"@angular/router": "~11.1.0",
"@fullcalendar/core": "^5.4.0",
"@ngx-translate/core": "~13.0.0",
"@ngx-translate/http-loader": "~4.0.0",
"angular2-csv": "^0.2.9",
"chart.js": "^2.9.4",
"classlist.js": "~1.1.20150312",
"core-js": "~2.5.4",
"file-saver": "^2.0.5",
"font-awesome": "~4.7.0",
"primeflex": "^1.0.0",
"primeicons": "^4.1.0",
"primeng": "^11.3.1"
...
}
我在 angular.json 中添加了脚本:
"architect": {
"build": {
...
"scripts": [
"node_modules/chart.js/dist/Chart.js"
],
...
但是当我单击更新按钮时,组件中没有呈现任何内容。
我错过了什么? 提前致谢。
问题不在 chartjs 或 PrimeNG 中,但包含图表组件的模块未在应用模块中导入,
@NgModule({
declarations: [
...
],
imports: [
...
KpisModule <-- here
],
...
bootstrap: [AppComponent]
})
export class AppModule {...
添加它解决了我的问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.