Gráficas en Angular 4 con ng2-charts en menos de 5 minutos
Gráficas en Angular 4 con ng2-charts en menos de 5 minutos


Crear gráficas en Angular 4 con ng2-charts no puede ser más simple, en menos de 5 minutos tendrás lista cualquier gráfica que necesites, y cómo verás todo de forma muy sencilla.

Ng2-charts utiliza la librería chart.js, así que si quieres profundizar, simplemente deberás echar un ojo a la documentación.

Yo voy a estar trabajando con AngularCli para llevar a cabo este tutorial, lo primero que vamos a hacer es instalar las dependencias con el siguiente comando.

Una vez tenemos las dependencias instaladas, vamos a añadir el cdn de bootstrap al archivo index.html.

Ahora, siguiendo los pasos de la documentación, vamos a crear un componente nuevo con el siguiente comando.

Y vamos a abrir el componente para reemplazar el código por el siguiente.

El método lineChartData prepara los datos para la gráfica, en nuestro caso utilizaremos una gráfica de tipo line, después establecemos unos estilos con el array lineChartColors para poder cambiar la apariencia de la gráfica. Gracias al método randomize() podremos hacer un shuffle de los datos de la gráfica para que vayan cambiando de forma aleatoria.

Cursos de Angular

Si estás interesado en Angular, visita Cursosdesarrolloweb, tenemos varios cursos sobre Angular que seguro te interesan.

Todos los cursos tienen acceso de forma indefinida 24/7, así que puedes seguirlos adecuando el horario a tus necesidades.



Ahora abre el archivo line-chart-demo.component.html y modifica el código por el siguiente.

Finalmente habremos conseguido el siguiente resultado.

Gráficas en Angular 4 con ng2-charts en menos de 5 minutos
Gráficas en Angular 4 con ng2-charts en menos de 5 minutos

Aquí tienes muchos más ejemplos para poder generar cualquier tipo de gráfica con Angular 4.

Más tutoriales sobre gráficas de la plataforma.