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 para crear una estructura básica. Así que espero que ya lo hayas instalado. Y usamos como contenedor para chart.js. vue-cli vue-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 y crear nuestro componente. vue-chartjs En la función necesitamos llamar al método con nuestros datos y opciones. mount() renderChart() 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 Entonces, el gráfico crecerá soldado en nuestro contenedor exterior. responsive: true. ☝ Podemos llamar al método porque extendimos el BaseChart, donde este método y algunos accesorios están definidos renderChart() 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 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 backgroundColor; createLinearGradient() Aquí es donde comienza la diversión. 🎢 Pero para usarlo necesitamos el objeto canvas. Pero esto no es gran cosa, ya que tiene una referencia a él. Podemos acceder a él a través de vue-chartjs 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 a . 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. this.gradient backgroundColor 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!
