angular-material-app documentation
  1. Components
  2. AgeComponent

File

src/app/analysis/crowd/age/age.component.ts

Implements

OnInit

Metadata

selector analysis-crowd-age
styleUrls ./age.component.scss
templateUrl ./age.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/analysis/crowd/age/age.component.ts:22

Inputs

data
Type : any
Defined in src/app/analysis/crowd/age/age.component.ts:10

Methods

ngOnInit
ngOnInit()
Defined in src/app/analysis/crowd/age/age.component.ts:26
Returns : void
onSelect
onSelect(event)
Defined in src/app/analysis/crowd/age/age.component.ts:28
Parameters :
Name Optional
event No
Returns : void

Properties

colorScheme
Type : object
Default value : { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }
Defined in src/app/analysis/crowd/age/age.component.ts:15
doughnut
Default value : true
Defined in src/app/analysis/crowd/age/age.component.ts:22
explodeSlices
Default value : false
Defined in src/app/analysis/crowd/age/age.component.ts:21
showLabels
Default value : true
Defined in src/app/analysis/crowd/age/age.component.ts:20
showLegend
Default value : true
Defined in src/app/analysis/crowd/age/age.component.ts:13
 
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'analysis-crowd-age',
  templateUrl: './age.component.html',
  styleUrls: ['./age.component.scss']
})
export class AgeComponent implements OnInit {
  @Input()
  data: any;

  // options
  showLegend = true;

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  // pie
  showLabels = true;
  explodeSlices = false;
  doughnut = true;

  constructor() {}

  ngOnInit() {}

  onSelect(event) {
    console.log(event);
  }
}
Copy
<mat-card>
  <mat-card-title>人群年龄分布TOP3</mat-card-title>
  <mat-card-content>
    <ngx-charts-pie-chart *ngIf="data?.length"
                          [scheme]="colorScheme"
                          [results]="data"
                          [legend]="showLegend"
                          [explodeSlices]="explodeSlices"
                          [labels]="showLabels"
                          [doughnut]="doughnut"
                          (select)="onSelect($event)">
    </ngx-charts-pie-chart>
  </mat-card-content>
</mat-card>
Copy

./age.component.scss 

mat-card {
  margin: 5px;
  padding: 0;
}

mat-card-title {
  padding: 16px 24px;
}

mat-card-content {
  min-height: 400px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""