angular - 如何使用 ng2-charts 以 Angular 2 显示饼图上的数据？

Question

如图所示，我可以实现饼图，但如何在图表上显示数据

像这样:

<canvas baseChart  class="pie"
  [data]="Data"
  [labels]="Labels"
  [colors]="Colors"
  [chartType]="pieChartType">
</canvas>

 public Labels:string[]=['Female','Male'];
 public Data:any =[51,30];
 public pieChartType:string = 'pie';
 public Colors:any = 
 [
{
  backgroundColor: [      
  'green',
  'red'
  ]
  }
]; 

Answer 1

首先你需要运行两个npm命令

npm install ng2-charts --save

npm install chart.js --save

重要提示:在应用程序中嵌入 Chart.js 是强制性的!在你的 index.html 中

<script src="node_modules/chart.js/src/chart.js"></script>

在 App.module.ts 上导入这个

import { ChartsModule } from 'ng2-charts';
imports: [ChartsModule]

组件.html

<div style="display: block">
  <canvas baseChart
          [data]="pieChartData"
          [labels]="pieChartLabels"
          [chartType]="pieChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>

组件.ts

public pieChartLabels: string[] = ['Male', 'Female'];
  public pieChartData: number[] = [51, 30];
  public pieChartType: any = 'pie';

  // events
  public chartClicked(e: any): void {
    console.log(e);
  }

  public chartHovered(e: any): void {
    console.log(e);
  }

此代码按您预期的方式工作。