gpt4 book ai didi

javascript - 用 Angular 5 制作饼图

转载 作者:行者123 更新时间:2023-12-03 09:00:19 26 4
gpt4 key购买 nike

如何在 Angular 5 中制作饼图。我是硬编码数据(数据不是来自 API),想要根据到期时间和批处理状态制作饼图。下面是我的代码

组件.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>

组件.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

关于javascript - 用 Angular 5 制作饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51125965/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com