Question

如何在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: '' }    
];

Answer 1

我建议您使用D3js

您可以绘制很多图表。像PieChart

您可以在此处找到教程：Create a Pie Chart with Dynamic Data Using D3.js & Angular 2

Answer 2

我建议您看看chart.js。

我最近在Angular 6中使用了它，以绘制饼图和条形图，这些图在单击时会相互影响。我认为它很容易使用，您可以在线找到答案，文档也很有帮助。

Answer 3

正如其他人提到的那样，您可以将chart.js用作依赖项，并根据需要生成饼图，

import { Chart } from 'chart.js';

我个人已经将chart.js与angularjs一起使用，并且angular的效果很好。如果您想使用任何软件包，请使用ngx-charts，该软件包内部使用chart.js

在Angular 5中制作饼图

3 个答案: