RadarChartA radar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

Radar - 图1

View on GitHub

  • radarchartdemo.ts
  • radarchartdemo.html

radarchartdemo.ts

  2. export class RadarChartDemo {
  4.     data: any;
  6.     constructor() {
  7.         this.data = {
  8.             labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
  9.             datasets: [
  10.                 {
  11.                     label: 'My First dataset',
  12.                     backgroundColor: 'rgba(179,181,198,0.2)',
  13.                     borderColor: 'rgba(179,181,198,1)',
  14.                     pointBackgroundColor: 'rgba(179,181,198,1)',
  15.                     pointBorderColor: '#fff',
  16.                     pointHoverBackgroundColor: '#fff',
  17.                     pointHoverBorderColor: 'rgba(179,181,198,1)',
  18.                     data: [65, 59, 90, 81, 56, 55, 40]
  19.                 },
  20.                 {
  21.                     label: 'My Second dataset',
  22.                     backgroundColor: 'rgba(255,99,132,0.2)',
  23.                     borderColor: 'rgba(255,99,132,1)',
  24.                     pointBackgroundColor: 'rgba(255,99,132,1)',
  25.                     pointBorderColor: '#fff',
  26.                     pointHoverBackgroundColor: '#fff',
  27.                     pointHoverBorderColor: 'rgba(255,99,132,1)',
  28.                     data: [28, 48, 40, 19, 96, 27, 100]
  29.                 }
  30.             ]
  31.         };
  32.     }
  33. }
  34.  

radarchartdemo.html

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