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

File

src/app/analysis/preference/field/field.component.ts

Implements

OnInit

Metadata

selector analysis-preference-field
styleUrls ./field.component.scss
templateUrl ./field.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/analysis/preference/field/field.component.ts:24

Inputs

data
Type : any
Defined in src/app/analysis/preference/field/field.component.ts:10

Methods

ngOnInit
ngOnInit()
Defined in src/app/analysis/preference/field/field.component.ts:28
Returns : void
onSelect
onSelect(event)
Defined in src/app/analysis/preference/field/field.component.ts:30
Parameters :
Name Optional
event No
Returns : void

Properties

colorScheme
Type : object
Default value : { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }
Defined in src/app/analysis/preference/field/field.component.ts:22
gradient
Default value : false
Defined in src/app/analysis/preference/field/field.component.ts:15
showLegend
Default value : false
Defined in src/app/analysis/preference/field/field.component.ts:16
showXAxis
Default value : true
Defined in src/app/analysis/preference/field/field.component.ts:13
showXAxisLabel
Default value : true
Defined in src/app/analysis/preference/field/field.component.ts:17
showYAxis
Default value : true
Defined in src/app/analysis/preference/field/field.component.ts:14
showYAxisLabel
Default value : true
Defined in src/app/analysis/preference/field/field.component.ts:19
xAxisLabel
Type : string
Default value : 'Country'
Defined in src/app/analysis/preference/field/field.component.ts:18
yAxisLabel
Type : string
Default value : 'Population'
Defined in src/app/analysis/preference/field/field.component.ts:20
 
import { Component, OnInit, Input } from '@angular/core';

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

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = false;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

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

  constructor() {}

  ngOnInit() {}

  onSelect(event) {
    console.log(event);
  }
}
Copy
<mat-card>
  <mat-card-title>人群领域偏好</mat-card-title>
  <mat-card-content>
    <ngx-charts-bar-horizontal *ngIf="data?.length" [scheme]="colorScheme" [results]="data" [gradient]="gradient"
      [xAxis]="showXAxis" [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
      (select)="onSelect($event)">
    </ngx-charts-bar-horizontal>
  </mat-card-content>
</mat-card>
Copy

./field.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 ""