Angular 将数据从窗体发送到同一级别的另一个组件-角度
我对angular不熟悉，我有以下组件： curva-form.componente.ts su html 我想将该表单的数据发送到下一个组件这些组件处于同一级别-模块，我已经阅读了一些关于输入和输出的内容，但我不太理解 curva-grafico.component.ts su htmlAngular 将数据从窗体发送到同一级别的另一个组件-角度,angular,chart.js,Angular,Chart.js,我对angular不熟悉，我有以下组件： curva-form.componente.ts su html 我想将该表单的数据发送到下一个组件这些组件处于同一级别-模块，我已经阅读了一些关于输入和输出的内容，但我不太理解 curva-grafico.component.ts su html 非常感谢您能给我的帮助。我会尽量简短： 有许多方法可以在组件之间进行通信。您提到的使用@Input和@Output装饰器的方法基本如下： @输入-从父级接收数据 这很简单。将数据传递给子组件，如下所示： 这
非常感谢您能给我的帮助。我会尽量简短： 有许多方法可以在组件之间进行通信。您提到的使用@Input和@Output装饰器的方法基本如下： @输入-从父级接收数据 这很简单。将数据传递给子组件，如下所示： 这样，您就可以从父组件中的一个组件接收数据并将其发送给另一个组件。您还可以通过其他方式在组件之间进行通信，如使用 事实上，看一看。它涵盖了很多东西 使用@Input和@Output的示例 我做了一个简短的例子。检查一下，以防您在执行时遇到问题
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from "@angular/forms";
import { CurvaModel } from '../../../models/curva/curva.model';
@Component({
selector: 'app-curva-form',
templateUrl: './curva-form.component.html',
styleUrls: ['./curva-form.component.css']
})
export class CurvaFormComponent implements OnInit {
title: string = "Curva de Crecimiento Y Desarrollo";
curva: CurvaModel;
//Formulario
curvaDocumentForm: FormGroup;
//Condicionales
loading: boolean = false;
constructor(
private _formBuilder: FormBuilder,
) {
}
ngOnInit() {
this.curvaDocumentForm = this._formBuilder.group({
peso: ["", Validators.required],
talla: ["", Validators.required],
perimetro: ["", Validators.required],
});
}
}
<mat-card>
<mat-card-content>
<mat-card-title>
<div fxLayout="row wrap" ng-reflect-fx-layout="row wrap">
<div class="p-10" fxFlex.gt-sm="0" fxFlex.gt-xs="0" fxFlex="0">
{{ title }}
</div>
<div
class="p-10"
fxFlex.gt-sm="55"
fxFlex.gt-xs="55"
fxFlex="100"
></div>
</div>
</mat-card-title>
<mat-horizontal-stepper linear #stepper>
<!-- Curva crecimiento y desarrollo form -->
<mat-step [stepControl]="curvaDocumentForm">
<form [formGroup]="curvaDocumentForm">
<ng-template matStepLabel>Datos del Menor</ng-template>
<div
fxLayout="row wrap"
ng-reflect-fx-layout="row wrap"
style="flex-flow: row wrap; box-sizing: border-box; display: flex;"
>
<div
class="p-10"
fxFlex.gt-sm="33"
fxFlex.gt-xs="33"
fxFlex="33"
style="flex: 1 1 33%; box-sizing: border-box; max-width: 33%;"
>
<mat-form-field>
<mat-label>Ingrese el Peso (kg)*</mat-label>
<input
matInput
placeholder="Ingrese el Peso"
formControlName="peso"
/>
</mat-form-field>
<mat-form-field>
<mat-label>Ingrese la Talla (cm) *</mat-label>
<input
matInput
placeholder="Ingrese la Talla"
formControlName="talla"
/>
</mat-form-field>
<mat-form-field>
<mat-label>Ingrese el Perimetro Cefalico (cm)*</mat-label>
<input
matInput
placeholder="Ingrese el Perimetro Cefalico"
formControlName="perimetro"
/>
</mat-form-field>
</div>
<div>
</div>
</div>
<button
(click)="Calcular()"
class="m-t-20"
color="primary"
mat-raised-button
[disabled]="loading"
mat-button matStepperNext>Calcular</button>
</form>
</mat-step>
</mat-horizontal-stepper>
</mat-card-content>
</mat-card>
<router-outlet><app-curva-grafico></app-curva-grafico></router-outlet>
import { Component, AfterViewInit } from "@angular/core";
@Component({
selector: "app-curva-grafico",
templateUrl: "./curva-grafico.component.html",
styleUrls: ["./curva-grafico.component.css"],
})
export class CurvaGraficoComponent implements AfterViewInit {
constructor() {
}
public lineChartData: Array<any> = [
// peso para la tall B 0 - 2
/* { data: [3.3,3.4,3.5,3.6,3.7,3.8,3.9,4,4.2,
4.3,4.4,4.5,4.7,4.8,5,5.1,5.3,5.4,5.6,5.8,
6,6.1,6.3,6.5,6.7,6.9,7.1,7.2,7.4,7.6,7.8,
8,8.1,8.3,8.5,8.6,8.8,8.9,9.1,9.3,9.4,9.6,
9.7,9.9,10,10.2,10.3,10.5,10.6,10.8,10.9,
11.1,11.2,11.3,11.5,11.6,11.8,11.9,12.1,
12.2,12.3,12.5,12.6,12.7,12.8,13,13.1,13.2,
13.3,13.4,13.6,13.7,13.8,13.9,14,14.2,14.3,
14.4,14.6,14.7,14.9,15,15.2,15.3,15.5,15.6,
15.8,15.9,16.1,16.2,16.4,16.5,16.7,16.8,17,
17.1,17.3,17.4,17.6,17.7,17.9,18,18.2,18.4,
18.5,18.7,18.9,19.1,19.2,19.4,19.6,19.8,20,
20.2,20.4,20.6,20.8,21,21.2,21.5,21.7,21.9,
22.1,22.4,22.6,22.8,23.1,23.3,23.6,23.8,24.1], label: 'SD3'},
{ data: [3,3.1,3.1,3.2,3.3,3.4,3.6,3.7,3.8,3.9,
4,4.1,4.2,4.4,4.5,4.6,4.8,4.9,5.1,5.3,5.4,5.6,
5.8,5.9,6.1,6.3,6.4,6.6,6.8,7,7.1,7.3,7.4,7.6,
7.7,7.9,8,8.2,8.3,8.5,8.6,8.7,8.9,9,9.2,9.3,
9.4,9.6,9.7,9.8,10,10.1,10.2,10.4,10.5,10.6,
10.8,10.9,11,11.2,11.3,11.4,11.5,11.6,11.7,
11.9,12,12.1,12.2,12.3,12.4,12.5,12.6,12.7,
12.8,13,13.1,13.2,13.3,13.5,13.6,13.7,13.9,
14,14.2,14.3,14.5,14.6,14.7,14.9,15,15.1,15.3,
15.4,15.6,15.7,15.8,16,16.1,16.3,16.4,16.5,
16.7,16.8,17,17.1,17.3,17.5,17.6,17.8,18,18.1,
18.3,18.5,18.7,18.8,19,19.2,19.4,19.6,19.8,
20,20.2,20.4,20.6,20.8,21,21.2,21.4,21.7,21.9], label: 'SD2'},
{ data: [2.7,2.8,2.9,3,3,3.1,3.2,3.3,3.4,3.5,
3.6,3.8,3.9,4,4.1,4.2,4.4,4.5,4.7,4.8,5,5.1,
5.3,5.4,5.6,5.7,5.9,6.1,6.2,6.4,6.5,6.7,6.8,
7,7.1,7.2,7.4,7.5,7.6,7.8,7.9,8,8.2,8.3,8.4,
8.5,8.7,8.8,8.9,9,9.2,9.3,9.4,9.5,9.6,9.8,9.9,
10,10.1,10.2,10.3,10.4,10.6,10.7,10.8,10.9,11,
11.1,11.2,11.3,11.4,11.5,11.6,11.7,11.8,11.9,
12,12.1,12.2,12.4,12.5,12.6,12.8,12.9,13,13.2,
13.3,13.4,13.5,13.7,13.8,13.9,14.1,14.2,14.3,
14.4,14.6,14.7,14.8,14.9,15.1,15.2,15.3,15.5,
15.6,15.7,15.9,16,16.2,16.3,16.5,16.6,16.8,16.9,
17.1,17.3,17.4,17.6,17.8,17.9,18.1,18.3,18.5,
18.6,18.8,19,19.2,19.4,19.6,19.8,20], label: 'SD1'},
{ data: [2.4,2.5,2.6,2.7,2.8,2.9,2.9,3,3.1,3.2,3.3,
3.4,3.5,3.6,3.8,3.9,4,4.1,4.3,4.4,4.5,4.7,4.8,
5,5.1,5.3,5.4,5.6,5.7,5.9,6,6.1,6.3,6.4,6.5,6.7,
6.8,6.9,7,7.1,7.3,7.4,7.5,7.6,7.7,7.9,8,8.1,8.2,
8.3,8.4,8.5,8.6,8.8,8.9,9,9.1,9.2,9.3,9.4,9.5,
9.6,9.7,9.8,9.9,10,10.1,10.2,10.3,10.4,10.4,10.5,
10.6,10.7,10.8,10.9,11,11.2,11.3,11.4,11.5,11.6,
11.7,11.9,12,12.1,12.2,12.4,12.5,12.6,12.7,12.8,
13,13.1,13.2,13.3,13.4,13.5,13.7,13.8,13.9,14,
14.1,14.3,14.4,14.5,14.6,14.8,14.9,15,15.2,15.3,
15.4,15.6,15.7,15.9,16,16.2,16.3,16.5,16.6,16.8,
16.9,17.1,17.3,17.4,17.6,17.8,17.9,18.1,18.3], label: 'SD0' },
{ data: [2.2,2.3,2.4,2.5,2.5,2.6,2.7,2.8,2.9,
3,3,3.1,3.2,3.3,3.5,3.6,3.7,3.8,3.9,4,4.2,
4.3,4.4,4.6,4.7,4.9,5,5.1,5.3,5.4,5.5,5.6,
5.8,5.9,6,6.1,6.2,6.4,6.5,6.6,6.7,6.8,6.9,
7,7.1,7.2,7.3,7.5,7.6,7.7,7.8,7.9,8,8.1,8.2,
8.3,8.4,8.5,8.6,8.7,8.8,8.8,8.9,9,9.1,9.2,
9.3,9.4,9.5,9.5,9.6,9.7,9.8,9.9,10,10.1,10.2,
10.3,10.4,10.5,10.6,10.7,10.8,11,11.1,11.2,
11.3,11.4,11.5,11.6,11.8,11.9,12,12.1,12.2,
12.3,12.4,12.5,12.6,12.7,12.8,12.9,13.1,13.2,
13.3,13.4,13.5,13.6,13.7,13.9,14,14.1,14.2,
14.4,14.5,14.6,14.8,14.9,15,15.2,15.3,15.4,
15.6,15.7,15.9,16,16.2,16.3,16.5,16.6,16.8], label: 'SD1Neg' },
{ data: [2,2.1,2.2,2.3,2.3,2.4,2.5,2.6,2.6,2.7,
2.8,2.9,3,3.1,3.2,3.3,3.4,3.5,3.6,3.7,3.8,4,
4.1,4.2,4.3,4.5,4.6,4.7,4.8,5,5.1,5.2,5.3,5.4,
5.6,5.7,5.8,5.9,6,6.1,6.2,6.3,6.4,6.5,6.6,6.7,
6.8,6.9,7,7.1,7.2,7.3,7.4,7.5,7.6,7.6,7.7,7.8,
7.9,8,8.1,8.2,8.3,8.3,8.4,8.5,8.6,8.7,8.7,8.8,
8.9,9,9.1,9.1,9.2,9.3,9.4,9.5,9.6,9.7,9.8,9.9,
10,10.1,10.2,10.4,10.5,10.6,10.7,10.8,10.9,11,
11.1,11.2,11.3,11.4,11.5,11.6,11.7,11.8,11.9,
12,12.1,12.2,12.3,12.4,12.5,12.6,12.7,12.8,12.9,
13,13.2,13.3,13.4,13.5,13.6,13.7,13.9,14,14.1,
14.2,14.4,14.5,14.6,14.7,14.9,15,15.1,15.3,15.4], label: 'SD2Neg' },
{ data: [1.9,1.9,2,2.1,2.1,2.2,2.3,2.3,2.4,2.5,
2.6,2.7,2.7,2.8,2.9,3,3.1,3.2,3.3,3.4,3.6,3.7,
3.8,3.9,4,4.1,4.3,4.4,4.5,4.6,4.7,4.8,4.9,5,
5.1,5.2,5.3,5.4,5.5,5.6,5.7,5.8,5.9,6,6.1,6.2,
6.3,6.4,6.5,6.6,6.6,6.7,6.8,6.9,7,7.1,7.2,7.2,
7.3,7.4,7.5,7.6,7.6,7.7,7.8,7.9,7.9,8,8.1,8.2,
8.2,8.3,8.4,8.5,8.5,8.6,8.7,8.8,8.9,9,9.1,9.2,
9.3,9.4,9.5,9.6,9.7,9.8,9.9,10,10.1,10.2,10.3,
10.4,10.5,10.6,10.7,10.7,10.8,10.9,11,11.1,11.2,
11.3,11.4,11.5,11.6,11.7,11.8,11.9,12,12.1,12.2,
12.3,12.4,12.5,12.6,12.7,12.8,12.9,13,13.2,13.3,
13.4,13.5,13.6,13.7,13.8,14,14.1,14.2], label: 'SD3Neg' }, */
// Peso para la Talla B 2 - 5
{ data: [9.6,9.8,9.9,10.1,10.2,10.4,10.5,
10.7,10.8,11.0,11.1,11.3,11.4,11.6,11.7,
11.8,12.0,12.1,12.2,12.4,12.5,12.6,12.8,
12.9,13.0,13.1,13.3,13.4,13.5,13.6,13.7,
13.8,14.0,14.1,14.2,14.4,14.5,14.6,14.8,
14.9,15.1,15.2,15.4,15.5,15.7,15.8,16.0,
16.1,16.3,16.4,16.6,16.7,16.9,17.0,17.2,
17.3,17.5,17.6,17.8,17.9,18.1,18.3,18.4,
18.6,18.8,18.9,19.1,19.3,19.5,19.7,19.9,
20.1,20.3,20.5,20.7,20.9,21.1,21.3,21.6,
21.8,22.0,22.2,22.5,22.7,22.9,23.2,23.4,
23.7,23.9,24.2,24.4,24.7,25.0,25.2,25.5,
25.8,26.0,26.3,26.6,26.9,27.2,27.5,27.8,
28.0,28.3,28.6,28.9,29.2,29.5,29.8,30.1
], label: '+3'},
{ data: [8.8,8.9,9.1,9.2,9.4,9.5,9.6,9.8,
9.9,10.0,10.2,10.3,10.4,10.6,10.7,10.8,
11.0,11.1,11.2,11.3,11.4,11.6,11.7,11.8,
11.9,12.0,12.1,12.2,12.3,12.4,12.6,12.7,
12.8,12.9,13.0,13.1,13.3,13.4,13.5,13.7,
13.8,13.9,14.1,14.2,14.4,14.5,14.7,14.8,
14.9,15.1,15.2,15.3,15.5,15.6,15.8,15.9,
16.0,16.2,16.3,16.5,16.6,16.7,16.9,17.0,
17.2,17.4,17.5,17.7,17.9,18.0,18.2,18.4,
18.5,18.7,18.9,19.1,19.3,19.5,19.7,19.9,
20.1,20.3,20.5,20.7,20.9,21.1,21.3,21.5,
21.8,22.0,22.2,22.4,22.7,22.9,23.1,23.4,
23.6,23.9,24.1,24.4,24.6,24.9,25.1,25.4,
25.6,25.9,26.1,26.4,26.6,26.9,27.2], label: '+2'},
{ data: [8.1,8.2,8.3,8.5,8.6,8.7,8.8,9.0,
9.1,9.2,9.3,9.5,9.6,9.7,9.8,9.9,10.0,10.2,
10.3,10.4,10.5,10.6,10.7,10.8,10.9,11.0,
11.1,11.2,11.3,11.4,11.5,11.6,11.7,11.8,
11.9,12.1,12.2,12.3,12.4,12.5,12.7,12.8,
12.9,13.1,13.2,13.3,13.5,13.6,13.7,13.9,
14.0,14.1,14.2,14.4,14.5,14.6,14.7,14.9,
15.0,15.1,15.3,15.4,15.5,15.7,15.8,15.9,
16.1,16.2,16.4,16.5,16.7,16.9,17.0,17.2,
17.3,17.5,17.7,17.8,18.0,18.2,18.4,18.5,
18.7,18.9,19.1,19.3,19.5,19.7,19.8,20.0,
20.2,20.4,20.7,20.9,21.1,21.3,21.5,21.7,
21.9,22.1,22.4,22.6,22.8,23.0,23.3,23.5,
23.7,23.9,24.1,24.4,24.6], label: '+1'},
{ data: [7.4,7.6,7.7,7.8,7.9,8.0,8.1,8.2,
8.4,8.5,8.6,8.7,8.8,8.9,9.0,9.1,9.2,9.3,
9.4,9.5,9.6,9.7,9.8,9.9,10.0,10.1,10.2,
10.3,10.4,10.5, 10.6,10.7,10.8,10.9,11.0,
11.1,11.2,11.3,11.4,11.5,11.7,11.8,11.9,
12.0,12.2,12.3,12.4,12.5,12.6,12.8,12.9,
13.0,13.1,13.2,13.4,13.5,13.6,13.7,13.8,
13.9,14.1,14.2,14.3,14.4,14.6,14.7,14.8,
14.9,15.1,15.2,15.4,15.5,15.6,15.8,15.9,
16.1,16.2,16.4,16.5,16.7,16.8,17.0,17.2,
17.3,17.5,17.7,17.8,18.0,18.2,18.3,18.5,
18.7,18.9,19.1,19.2,19.4,19.6,19.8,20.0,
20.2,20.4,20.6,20.8,21.0,21.2,21.4,21.6,
21.8,22.0,22.2,22.4], label: '0' },
{ data: [6.9,7.0,7.1,7.2,7.3,7.4,7.5,7.6,
7.7,7.8,7.9,8.0,8.1,8.2,8.3,8.4,8.5,8.6,
8.7,8.8,8.9,9.0,9.1,9.2,9.2,9.3,9.4,9.5,
9.6,9.7,9.7,9.8,9.9,10.0,10.1,10.2,10.3,
10.4,10.5,10.7,10.8,10.9,11.0,11.1,11.2,
11.3,11.5,11.6,11.7,11.8,11.9,12.0,12.1,
12.2,12.3,12.4,12.6,12.7,12.8,12.9,13.0,
13.1,13.2,13.3,13.4,13.6,13.7,13.8,13.9,
14.0,14.2,14.3,14.4,14.5,14.7,14.8,14.9,
15.1,15.2,15.4,15.5,15.6,15.8,15.9,16.1,
16.2,16.4,16.5,16.7,16.8,17.0,17.1,17.3,
17.5,17.6,17.8,18.0,18.1,18.3,18.5,18.6,
18.8,19.0,19.2,19.3,19.5,19.7,19.9,20.0,
20.2,20.4], label: '-1' },
{ data: [6.3,6.4,6.5,6.6,6.7,6.8,6.9,7.0,
7.1,7.2,7.3,7.4,7.5,7.6,7.7,7.8,7.9,7.9,
8.0,8.1,8.2,8.3,8.4,8.5,8.5,8.6,8.7,8.8,
8.8,8.9,9.0,9.1,9.2,9.3,9.3,9.4,9.5,9.6,
9.7,9.9,10.0,10.1,10.2,10.3,10.4,10.5,
10.6,10.7,10.8,10.9,11.0,11.1,11.2,11.3,
11.4,11.5,11.6,11.7,11.8,11.9,12.0,12.1,
12.2,12.3,12.4,12.5,12.6,12.8,12.9,13.0,
13.1,13.2,13.3,13.4,13.6,13.7,13.8,13.9,
14.0,14.2,14.3,14.4,14.5,14.7,14.8,14.9,
15.1,15.2,15.3,15.5,15.6,15.8,15.9,16.0,
16.2,16.3,16.5,16.6,16.8,16.9,17.1,17.2,
17.4,17.5,17.7,17.9,18.0,18.2,18.3,18.5,
18.6], label: '-2' },
{ data: [5.9,6.0,6.1,6.1,6.2,6.3,6.4,6.5,
6.6,6.7,6.8,6.9,6.9,7.0,7.1,7.2,7.3,7.4,
7.4,7.5,7.6,7.7,7.7,7.8,7.9,8.0,8.0,8.1,
8.2,8.3,8.3,8.4,8.5,8.6,8.7,8.7,8.8,8.9,
9.0,9.1,9.2,9.3,9.4,9.5,9.6,9.7,9.8,9.9,
10.0,10.1,10.2,10.3,10.4,10.5,10.6,10.7,
10.8,10.9,11.0,11.1,11.1,11.2,11.3,11.4,
11.5,11.6,11.7,11.8,11.9,12.0,12.1,12.2,
12.3,12.4,12.5,12.6,12.8,12.9,13.0,13.1,
13.2,13.3,13.4,13.5,13.7,13.8,13.9,14.0,
14.1,14.3,14.4,14.5,14.6,14.8,14.9,15.0,
15.2,15.3,15.4,15.6,15.7,15.8,16.0,16.1,
16.2,16.4,16.5,16.7,16.8,16.9,17.1], label: '-3' },
];
public lineChartLabels: Array<any> = [
65,65.5,66,66.5,67,67.5,68,68.5,69,69.5,70,70.5,
71,71.5,72,72.5,73,73.5,74,74.5,75,75.5,76,76.5,77,77.5,
78,78.5,79,79.5,80,80.5,81,81.5,82,82.5,83,83.5,84,84.5,
85,85.5,86,86.5,87,87.5,88,88.5,89,89.5,90,90.5,91,91.5,
92,92.5,93,93.5,94,94.5,95,95.5,96,96.5,97,97.5,98,98.5,
99,99.5,100,100.5,101,101.5,102,102.5,103,103.5,104,104.5,
105,105.5,106,106.5,107,107.5,108,108.5,109,109.5,110,110.5,
111,111.5,112,112.5,113,113.5,114,114.5,115,115.5,116,
116.5,117,117.5,118,118.5,119,119.5,120
];
public lineChartOptions: any = {
responsive: true,
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Talla (cm)'
},
ticks: {
maxTicksLimit: 12
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Peso (kg)'
}
}]
},
/* elements: {
point: {
radius: 0
}
}, */
};
public lineChartColors: Array<any> = [
{
// SD3
//backgroundColor: 'rgba (75, 192, 192, 0.2)',
borderColor: "rgba(255,0,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#000000",
pointHoverBorderColor: "rgba(25,118,210,0.5)",
},
{
// SD2
//backgroundColor: 'rgba(38,218,210,0.1)',
borderColor: "rgba(255,165,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38,218,210,0.5)",
},
{
// SD1
//backgroundColor: 'rgba(38,218,210,0.1)',
borderColor: "rgba(255,255,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38,218,210,0.5)",
},
{
// SD0
//backgroundColor: 'rgba(38,218,210,0.1)',
borderColor: "rgba(0,128,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38,218,210,0.5)",
},
{
// SD1neg
//backgroundColor: 'rgba(38,218,210,0.1)',
borderColor: "rgba(255,255,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38,218,210,0.5)",
},
{
// SD2neg
//backgroundColor: 'rgba(38,218,210,0.1)',
borderColor: "rgba(255,165,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38,218,210,0.5)",
},
{
// SD3neg
//backgroundColor: 'rgba(38,218,210,0.1)',
borderColor: "rgba(255,0,0)",
fill: "rgba(25,118,210,0.1)",
pointBackgroundColor: "rgba(128,128,128)",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#fff",
pointHoverBorderColor: "rgba(38,218,210,0.5)",
},
];
public lineChartLegend = true;
public lineChartType = "line";
ngAfterViewInit() {}
}
<div fxLayout="row wrap">
<div fxFlex.gt-xs="50" fxFlex.gt-xs="100" fxFlex="100">
<mat-card>
<mat-card-content>
<mat-card-title>Graficos</mat-card-title>
<mat-card-subtitle>Curva de Crecimiento Y Desarrollo</mat-card-subtitle>
<canvas baseChart height="150" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors"
[legend]="lineChartLegend" [chartType]="lineChartType">
</canvas>
</mat-card-content>
</mat-card>
</div>
</div>