Hoy voy a enseñarte a usar chart.js (librería para crear gráficas en la web) con Vue.js cuando se programa en Webpack con NPM.

Te aviso desde ahora que probablemente esta no sea la manera de vue, es decir, lo haremos como lo haríamos sin usar el framework, pero esto me ha funcionado y te funcionará a ti para no tener tantos problemas al integrar Chart.js con Vue.

Nota: primero te invito a familiarizarte con chart.js, ya que aquí solo te enseñaré a usarlo con Vue a través de webpack con npm.

Instalando e importando chart.js

Primero instalamos el paquete de chart.js con:

npm install --save chart.js

Ahora en nuestro componente (y así en cualquier otro componente en donde vayamos a usar las gráficas) importamos todo de manera automática con:

Canvas para la gráfica con Vue.js

Gráfica con chart.js y Vue.js usando Webpack y NPM - Integración

Gráfica con chart.js y Vue.js usando Webpack y NPM – Integración

Después en nuestro template del componente creamos un canvas con un id que debemos recordar para más tarde:

Fíjate que yo le he colocado el id de graficaDias. Ahora en el código de JavaScript simplemente creamos la gráfica con new Chart, pasándole el elemento recuperado con querySelector.

Gráfica dinámica

En caso de que vayas a cambiar los datos de las gráficas en un evento (clic del botón, cambio del select, etcétera) entonces te recomiendo guardar una referencia a la gráfica para poder reiniciarla más tarde.

Para ello, en el data del componente coloca una variable llamada grafica iniciada en null. Después de eso agrega el siguiente fragmento antes del código que inicia la gráfica:

Eso hará que, si la gráfica existe, se destruya como lo indiqué en otro post. Y finalmente cuando inicies la gráfica (con new Chart) asigna el resultado a this.grafica, por ejemplo:

Entonces cada que ese fragmento de código se ejecute vas a comprobar si la gráfica existe. Si ya existe simplemente la vas a destruir, permitiendo que puedas volver a montar la gráfica en ese canvas.

Así es como podemos usar las gráficas de Chart.js en Vue.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: