要在Angular中显示多个ChartJs图表的数据,可以使用ng-chartjs库。下面是一个示例解决方法:
npm install ng-chartjs chart.js --save
import { NgModule } from '@angular/core';
import { ChartModule } from 'ng-chartjs';
@NgModule({
imports: [
ChartModule
]
})
export class AppModule { }
import { Component } from '@angular/core';
@Component({
selector: 'app-chart',
template: `
`
})
export class ChartComponent {
chartType = 'bar';
chartData = [
{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
];
chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
chartOptions = {
responsive: true
};
}
通过重复上述步骤,你可以在同一个页面上显示多个ChartJs图表的数据。只需复制和粘贴ChartComponent,并修改图表数据和选项即可。