DoughnutChartA doughnut chart is a variant of the pie chart, with a blank center allowing for additional information about the data as a whole to be included.

Doughnut - 图1

View on GitHub

  • doughnutchartdemo.ts
  • doughnutchartdemo.html

    doughnutchartdemo.ts

  2. export class DoughnutChartDemo {
  4.     data: any;
  6.     constructor() {
  7.         this.data = {
  8.             labels: ['A','B','C'],
  9.             datasets: [
  10.                 {
  11.                     data: [300, 50, 100],
  12.                     backgroundColor: [
  13.                         "#FF6384",
  14.                         "#36A2EB",
  15.                         "#FFCE56"
  16.                     ],
  17.                     hoverBackgroundColor: [
  18.                         "#FF6384",
  19.                         "#36A2EB",
  20.                         "#FFCE56"
  21.                     ]
  22.                 }]    
  23.             };
  24.     }
  25. }
  26.  

doughnutchartdemo.html

  2. <p-chart type="doughnut" [data]="data"></p-chart>
  3.