Hola a todos, hoy os voy a explicar como podemos integrar graficas con chart.js en nuestra aplicación Angular.
Con chart.js podemos integrar gráficas a nuestra aplicación Angular de una forma sencilla.
Puedes ver como funciona desde su página oficial.
Creación proyecto Angular
Lo primero es crear un proyecto Angular, sino sabes como se hace, te dejo un tutorial aquí:
Instalación de chart.js
Abre una terminal y escribe:
Creación de componentes
Antes de meternos en cada una de las graficas, vamos a crear 3 componentes para poner 3 tipos de gráficas diferentes. Abre una terminal y escribe:
En app.module, deben estar importados:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LineChartComponent } from './line-chart/line-chart.component';
import { BarChartComponent } from './bar-chart/bar-chart.component';
import { PieChartComponent } from './pie-chart/pie-chart.component';
@NgModule({
declarations: [
AppComponent,
LineChartComponent,
BarChartComponent,
PieChartComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Y en app.routing.module ponemos cada una de las rutas a cada componente:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LineChartComponent } from './line-chart/line-chart.component';
import { BarChartComponent } from './bar-chart/bar-chart.component';
import { PieChartComponent } from './pie-chart/pie-chart.component';
const routes: Routes = [
{ path: 'line-chart', component: LineChartComponent },
{ path: 'bar-chart', component: BarChartComponent },
{ path: 'pie-chart', component: PieChartComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'line-chart'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
En el app.component.html, pegamos el siguiente código:
</pre> <ul> <li><a href="#">Line chart</a></li> <li><a href="#">Bar chart</a></li> <li><a href="#">Pie chart</a></li> </ul> <pre>
Line en chart.js
Una gráfica de linea son varios puntos unidos por una misma linea. Usaremos los datos de ejemplo de su página oficial.
En el fichero line-chart.component.ts, pegamos el siguiente código:
import { Component, OnInit } from '@angular/core';
// Necesitamos importar Chart desde chart.js
import { Chart, ChartType } from 'chart.js/auto';
@Component({
selector: 'app-line-chart',
templateUrl: './line-chart.component.html',
styleUrls: ['./line-chart.component.scss']
})
export class LineChartComponent implements OnInit {
// Atributo que almacena los datos del chart
public chart: Chart;
ngOnInit(): void {
// datos
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
fill: false,
borderColor: 'rgb(75, 192, 192)',
tension: 0.1
}]
};
// Creamos la gráfica
this.chart = new Chart("chart", {
type: 'line' as ChartType, // tipo de la gráfica
data: data // datos
});
}
}
En el fichero line-chart.component.html, pegamos el siguiente código:
<canvas id="chart">{{ chart }}</canvas>
Este es el resultado:
Bar en chart.js
Una gráfica de barras son varias líneas verticales que representan datos. Usaremos los datos de ejemplo de su página oficial.
En el fichero bar-chart.component.ts, pegamos el siguiente código:
import { Component, OnInit } from '@angular/core';
import { Chart, ChartType } from 'chart.js/auto';
@Component({
selector: 'app-bar-chart',
templateUrl: './bar-chart.component.html',
styleUrls: ['./bar-chart.component.scss']
})
export class BarChartComponent implements OnInit {
// Atributo que almacena los datos del chart
public chart: Chart;
ngOnInit(): void {
// datos
const data = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(255, 159, 64, 0.2)',
'rgba(255, 205, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(201, 203, 207, 0.2)'
],
borderColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(153, 102, 255)',
'rgb(201, 203, 207)'
],
borderWidth: 1
}]
};
// Creamos la gráfica
this.chart = new Chart("chart", {
type: 'bar' as ChartType, // tipo de la gráfica
data: data, // datos
options: { // opciones de la gráfica
scales: {
y: {
beginAtZero: true
}
}
},
});
}
}
En el fichero bar-chart.component.html, pegamos el siguiente código:
<canvas id="chart">{{ chart }}</canvas>
Este es el resultado:
Pie en chart.js
Una gráfica pie (tarta) es una representación circular de datos. Usaremos los datos de ejemplo de su página oficial.
En el fichero pie-chart.component.ts, pegamos el siguiente código:
import { Component, OnInit } from '@angular/core';
// Necesitamos importar Chart desde chart.js
import { Chart, ChartType } from 'chart.js/auto';
@Component({
selector: 'app-pie-chart',
templateUrl: './pie-chart.component.html',
styleUrls: ['./pie-chart.component.scss']
})
export class PieChartComponent implements OnInit {
// Atributo que almacena los datos del chart
public chart: any;
ngOnInit(): void {
// datos
const data = {
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
],
datasets: [{
label: 'My First Dataset',
data: [11, 16, 7, 3, 14],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(75, 192, 192)',
'rgb(255, 205, 86)',
'rgb(201, 203, 207)',
'rgb(54, 162, 235)'
]
}]
};
// Creamos la gráfica
this.chart = new Chart("chart", {
type: 'pie' as ChartType, // tipo de la gráfica
data: data, // datos
});
}
}
En el fichero pie-chart.component.html, pegamos el siguiente código:
<canvas id="chart">{{ chart }}</canvas>
Este es el resultado:
Hay muchas opciones que aún queda por explorar pero eso ya lo haremos en otro tutorial.
Te dejo un video donde lo explico con detalle.
También el repositorio Github donde esta el código.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta