Volvemos a la página de ng2-charts y pulsamos en "Line Chart":
Creamos un componente y lo incluímos en el fichero de directivas y de rutas.
Copiamos los códigos HTML y TypeScript de la web de ng2-charts en los ficheros de nuestro componente:
lineasDividendoMensualComponent.html:
<div>
<div>
<div style="display: block">
<canvas baseChart
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType">
</canvas>
</div>
</div>
</div>
lineasDividendoMensualComponent.ts:
import { Component, OnInit, ViewChild } from '@angular/core';
import { ChartDataSets, ChartOptions } from 'chart.js';
import { Color, Label } from 'ng2-charts';
@Component({
selector: 'app-lineas-dividendo-mensual',
templateUrl: './lineas-dividendo-mensual.component.html',
styleUrls: ['./lineas-dividendo-mensual.component.css']
})
export class LineasDividendoMensualComponent implements OnInit {
// Líneas
public lineChartData: ChartDataSets[] = [
{ data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], label: 'IE00B0M62S72 - iShares Euro Dividend UCITS ETF EUR' },
{ data: [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], label: 'IE00B14X4T88 - iShares Asia Pacific Dividend UCITS ETF USD' },
{ data: [0, 10, 0, 10, 0, 10, 0, 10, 0, 10, 0, 10], label: 'IE00B0M63177 - iShares MSCI Emerging Markets UCITS ETF' },
{ data: [0, 10, 20, 10, 0, 10, 20, 10, 0, 10, 20, 10], label: 'IE00B27YCK28 - iShares MSCI EM Latin America UCITS ETF USD' }
];
// Eje X
public lineChartLabels: Label[] = ['Enero', 'Febrero', 'Marzo',
'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre',
'Noviembre', 'Diciembre'];
// Opciones de la gráfica
public lineChartOptions: (ChartOptions & { annotation: any }) = {
responsive: true,
scales: {
// We use this empty structure as a placeholder for dynamic theming.
xAxes: [{}],
yAxes: [
{
id: 'y-axis-0',
position: 'left',
}
]
},
annotation: {
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0'
},
],
},
title: {
text: 'Dividendo Mensual',
fontSize: 20,
fontColor: 'rgba(0,0,0,1)',
display: true
},
legend: {
position: 'bottom',
}
};
// Colores de las líneas
public lineChartColors: Color[] = [
{ // Euro - Azul
backgroundColor: 'rgba(0,0,255,0.2)',
borderColor: 'rgba(0,0,255,1)',
pointBackgroundColor: 'rgba(0,0,255,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(0,0,255,1)'
},
{ // Asia - Rojo
backgroundColor: 'rgba(255,0,0,0.2)',
borderColor: 'rgba(255,0,0,1)',
pointBackgroundColor: 'rgba(255,0,0,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,0,0,1)'
},
{ // Emerging Markets - Amarillo
backgroundColor: 'rgba(255,255,0,0.2)',
borderColor: 'rgba(255,255,0,1)',
pointBackgroundColor: 'rgba(255,255,0,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,255,0,1)'
},
{ // Latin America - Verde
backgroundColor: 'rgba(0,255,0,0.2)',
borderColor: 'rgba(0,255,0,1)',
pointBackgroundColor: 'rgba(0,255,0,1)',
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(0,255,0,1)'
}
];
public lineChartLegend = true;
public lineChartType = 'line';
constructor() { }
ngOnInit() {
}
}
Arrancamos la aplicación, viajamos al componente, y nos aparecerá la siguiente gráfica:
Y con esto ya tendríamos la gráfica de líneas.
No hay comentarios:
Publicar un comentario