Creación de gráficos impresionantes con Vue.js y Chart.js

Sumérgete en las opciones de chart.js para crear gráficos impresionantes.

Los gráficos interactivos pueden proporcionar una manera genial de visualizar sus datos. Sin embargo, la mayoría de las soluciones listas para usar no son tan hermosas como podrían ser, con opciones predeterminadas.

¡Le mostraré cómo personalizar sus opciones de chart.js para hacer algunos gráficos geniales!

⚡ Inicio rápido

Lo que usaremos:

• Vue.js
• vue-chart.js
• vue-cli

Usamos vue-cli para crear una estructura básica. Así que espero que ya lo hayas instalado. Y usamos vue-chart.js como contenedor para chart.js.

vue init webpack gráficos impresionantes

Luego vamos a nuestra carpeta de proyecto e instalamos nuestras dependencias.

CD Awesome-charts && yarn install

Y agregamos vue-chartjs :

hilo añadir vue-chartjs chart.js

Nuestro primer gráfico

Entonces, creemos nuestro primer gráfico de líneas.

toque src/components/LineChart.js && subl .

Ahora necesitamos importar Line BaseChart desde vue-chartjs y crear nuestro componente.

En la función mount() necesitamos llamar al método renderChart() con nuestros datos y opciones.

LineChart.js

Pasamos un objeto de datos chart.js básico con algunos datos de muestra y en el parámetro de opción, pasamos responsive: true. Entonces, el gráfico crecerá soldado en nuestro contenedor exterior.

☝ Podemos llamar al método renderChart() porque extendimos el BaseChart, donde este método y algunos accesorios están definidos

Montar y probar

Ahora eliminamos el componente Hello.vue de nuestra App.vue e importamos nuestro gráfico.

aplicación.vue

Y después de ejecutar el script de desarrollo en nuestra terminal, deberíamos ver nuestro gráfico.

desarrollador de ejecución de hilo

💄 Hazme hermosa

Bien, ahora es el momento de un poco de embellecimiento 💅. Hay algunos trucos geniales en chart.js. Podemos pasar un valor hexadecimal de color a backgroundColor; Pero también podemos pasar un valor rgba(). Entonces podemos hacer que nuestro color sea transparente. Y como chart.js usa lienzo html para dibujar, podemos utilizar createLinearGradient()

Aquí es donde comienza la diversión. 🎢 Pero para usarlo necesitamos el objeto canvas. Pero esto no es gran cosa, ya que vue-chartjs tiene una referencia a él. Podemos acceder a él a través de this.$refs.canvas

Entonces en nuestro LineChart.js creamos dos variables para almacenar un gradiente. Porque tenemos conjuntos de datos.

Luego creamos dos degradados:

este.gradiente = este.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)

this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)

Hay otra función genial que podemos usar: addColorStop()

Creamos tres colorStops para cada degradado. Para 0%, 50% y 100%.

this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');this.gradient.addColorStop(1 , 'rgba(255, 0, 0, 0)');

this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');this.gradient2.addColorStop(1 , 'rgba(0, 231, 255, 0)');

Ahora podemos pasar this.gradient a backgroundColor . Y tenemos un gradiente muy agradable. Para obtener un efecto más agradable, también establecemos borderColor en el color individual con un alfa de 1. (o usamos el valor hexadecimal) y establecemos borderWidth en 1 y, por último, pero no menos importante, pointColor.

borderColor: '#FC2525',pointBackgroundColor: 'blanco',borderWidth: 1,pointBorderColor: 'blanco',

Presentación

El último paso es agregar algo de estilo al contenedor en nuestra App.vue

👏 Resultado Final

¡Feliz codificación!