如何在Angular 5中制作饼图。我是硬编码数据(数据不是来自API),并希望在到期和批次的基础上制作饼图。以下是我的代码
component.html
<ng-container matColumnDef="expiration">
<mat-header-cell *matHeaderCellDef> Expiration </mat-header-cell>
<mat-cell *matCellDef="let csvdata"> {{csvdata.expiration}} </mat-cell>
</ng-container>
<ng-container matColumnDef="lotstatus">
<mat-header-cell *matHeaderCellDef> Lot Status </mat-header-cell>
<mat-cell *matCellDef="let csvdata"> {{csvdata.lotstatus}} </mat-cell>
</ng-container>
component.ts
const ELEMENT_DATA: Element[] = [
{ type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '28/7/17', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
{ type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
{ type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
{ type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
{ type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
{ type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
{ type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
{ type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
{ type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
{ type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' },
{ type: 'MEDIA', id: 'SAB', name: 'Sabour aud Dextros e Agar', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: '', lotnumber: '2337515', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Packs', units: '1 Packs', subunits: '0', test: '' },
{ type: 'CONTROL', id: 'AFBQ CSLI DES', name: 'AFB Stain Control Slides', location: 'SLAB', department: 'MICS', workstation: '', manufacturer: 'REMEL', lotnumber: '00968', opened: '', closed: '', recieved: '', registration: '', expiration: '', lotstatus: 'A', norecieved: '1 Boxes', units: '1 Packs', subunits: '0', test: '' }
];
我建议你使用D3js
你可以做很多图表。像PieChart
你可以在这里找到一个教程:Create a Pie Chart with Dynamic Data Using D3.js & Angular 2
我建议你看看chart.js。
我最近在Angular 6中使用它来渲染在点击时相互影响的饼图和条形图。我认为它易于使用,您可以在线找到答案,文档也很有帮助。
正如其他人提到的,您可以使用chart.js作为依赖项并根据需要生成饼图,
import { Chart } from 'chart.js';
就个人而言,我已经使用了带有角度和角度的chart.js,它的效果非常好。如果你想使用任何软件包,请使用ngx-charts
,内部使用chart.js