在 Angular 中制作饼图 5
Make Pie Chart in Angular 5
如何在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 与 angularjs 和 angular 一起使用,效果非常好。如果您想使用任何包,请使用 ngx-charts
内部使用 chart.js
其他选项:
如何在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 与 angularjs 和 angular 一起使用,效果非常好。如果您想使用任何包,请使用 ngx-charts
内部使用 chart.js
其他选项: