Siempre has querido aprender Chart JS pero necesitabas entender las instrucciones de una manera más visual? Este sitio web cubre Chart JS con un enfoque más visual. El objetivo aquí es asegurar un mayor nivel de comprensión.
Guía de vídeo de Chart JS.
Chart JS es una maravillosa biblioteca de JavaScript con muchas opciones y aún así es bastante compacta. Eso hace que Chart JS sea un verdadero tesoro. Hay mucho que es posible hacer, pero si no lo entiendes, es posible que no lo veas. Este sitio cubre tanto como sea posible sobre Chart JS y todas sus posibilidades. ¿Listo para explorar?
¿Qué es Chart.js?
A menudo se escucha que Chart.js es una biblioteca o framework de Javascript para dibujar gráficos en Javascript. Sin embargo, lo que resulta bastante sorprendente es que una vez que las personas usan Chart.js, no ven esa conexión con Javascript.
Muchos tienden a olvidar que Chart.js se basa en Javascript. A lo que me refiero es que no ven cómo combinar los arreglos de Javascript junto con Chart.js debido a la complejidad de la etiqueta canvas que Chart.js utiliza.
Un gráfico se dibuja en una etiqueta canvas. El código que utiliza Chart.js son básicamente instrucciones para dibujar líneas, puntos, círculos y otras formas en un canvas en coordenadas precisas x e y. Una vez que entiendes que Chart.js es como un "Bootstrap" para canvas para dibujar rápidamente gráficos, tienes una mejor comprensión de lo que es.
Chart.js te ahorra tiempo ya que no necesitas aprender la API de canvas. El código de Chart.js es una plantilla preescrita que la API de canvas puede leer e inmediatamente dibujar el gráfico que deseas. Esta herramienta de ahorro de tiempo te ayuda a avanzar. Sin ella, tendrías que aprender a codificar en Javascript para que la API de canvas pueda leer (o "analizar" en términos de codificación).
Volviendo a la pregunta: ¿Qué es Chart.js? Así es como yo definiría Chart.js.
"Chart.js es una plantilla de gráficos preescrita codificada en JavaScript que la API de canvas puede leer."
www.Chartjs3.com
Esta definición te da un buen punto de partida para trabajar. Instantáneamente entiendes que es Javascript, pero también ves la conexión de por qué es ligeramente diferente. Está escrito para ser legible para la etiqueta canvas. La API canvas está escrita en Javascript pero el código es ligeramente diferente.
Muchos tienen dificultades porque no ven esta relación y no pueden entender realmente Chart.js desde un nivel más profundo. No entender cómo usar la API de canvas o cómo escribirla en Javascript no es algo malo. Esto limitará tus opciones y limitará la interactividad de tu gráfico. Esta limitación es lo que muchos experimentan como un obstáculo.
¿Por qué querrías usar Chart.js y el obstáculo que se presenta?
De muchas personas que desean usar Chart.js, imaginan gráficos bonitos, clicables e interactivos. Donde los datos se abstraen de una base de datos o un objeto JSON y una vez que se hace clic en un botón, cambia a algo nuevo y refrescante. Debería ser más que un gráfico plano estándar que comúnmente vemos en Ms. Excel. Lamentablemente, una vez que se dan cuenta de que la forma de usar Chart.js requiere una comprensión sólida de múltiples disciplinas (Javascript, Chart.js, la API de canvas, MySQL, PHP, Node JS y más), se convierte en un verdadero obstáculo para obtener el gráfico interactivo.
¿Cómo romper el obstáculo en Chart.js?
El objetivo de este libro es eliminar el obstáculo que experimenta en Chart.js. Después de darme cuenta de que los temas de video más comúnmente vistos son sobre Chart.js en conjunción con la interactividad, decidí cubrir un libro sobre eso.
Este libro está escrito para ayudarte a llegar allí. Este es un libro visual en formato de video. Esto significa que aprenderás, pero todos los temas también están en formato de video para una mejor explicación y comprensión. Muchos programadores son orientados visualmente, por lo que trabajan con sitios web y codificación. Verlo funcionar y entender el cómo y el por qué es clave para aprender Chart.js.
¿Por qué la documentación de Chart.js no cubre temas de interactividad?
Por lo general, puede que haya leído la documentación de Chart.js y descubierto que no profundizan en la interactividad. El objetivo de la documentación de Chart.js es ayudarlo a aprender cómo usar Chart.js. En otras palabras, está fuera de su alcance. Ya que su objetivo es explicar cómo dibujar gráficos. No cubren cómo crear interactividad, ya que se considera Javascript, código de la API de canvas, MySQL u otros que no están relacionados con Chart.js. Y es correcto que esperen que visite su sitio porque desea aprender a dibujar un gráfico en Chart.js.
Chart.js se llama un marco de JS. Un marco consta de dos palabras, que son marco y trabajo. Esto significa que trabajas dentro de un ámbito o marco fijo. Véalo como un marco de imagen que es como un "borde" (piense en css). Todo lo fuera de ese borde está fuera del ámbito y no está cubierto en Chart.js.
¿Por qué? Si quieres aprender Chart.js con MySQL, esperan que estudies la documentación de MySQL ya que ellos no están aquí para enseñarte eso. Aunque son útiles combinados, la documentación de Chart.js evita cubrir eso para mantenerla concisa. De lo contrario, la documentación sería enorme e ingobernable. Piensa en todos los temas que necesitan cubrir, que son muchos otros marcos de trabajo y lenguajes de programación.
Documentación interactiva de Chart.js.
Ahora es momento de agregar una capa de complejidad que cubra las partes interactivas de Chart.js.
Para crear un gráfico interactivo, deberás conocer múltiples lenguajes y temas dentro de JavaScript.
- Campos de entrada HTML: Los campos de entrada son el punto de partida de la interactividad en un gráfico.
- JavaScript arrays: Sin comprender esto no serías capaz de manipular los datos de ninguna manera o formato.
- JavaScript funciones: Las funciones son necesarias para crear una respuesta una vez que se ha hecho clic en un botón o se ha activado un efecto de desplazamiento del mouse.
- Chart.js API: La API de Chart.js abarca algunos temas avanzados que te ayudarán con elementos relacionados con la etiqueta canvas.
- Base de datos (MySQL, MongoDB, etc.): Para la conexión a una base de datos, existen muchas opciones posibles. Muchas personas se están moviendo hacia un lenguaje de programación JS completo, lo que significa que tanto el frontend como el backend son JS.
- Les langages de scripting côté serveur (PHP, Node.js, etc.): Ceux-ci sont essentiels en tant qu'intermédiaires pour "communiquer" entre le frontend et le backend (base de données ou serveurs).
Cubramos estos temas en los siguientes capítulos.
Capítulo 1: Creación de un gráfico fijo en Chart.js
Crear un gráfico con Chart.js es bastante sencillo. La documentación de Chart.js tiene un código de demostración agradable. Sin embargo, tienden a omitir alguna explicación adicional. La parte crucial son los bloques, que son fragmentos de código que finalmente están conectados de manera ordenada. Tienen una antigua demostración que proviene de Chart.js 2 y no recomiendo usar ese código específico. Aprenda el nuevo método.
Estos bloques comúnmente están estructurados en 3 partes separadas, pero a menudo puede haber más si el gráfico tiene algunas personalizaciones. Estos bloques se pueden considerar el esqueleto o la base del código de Chart.js. En los videos a menudo me refiero a ellos como:
- Bloque de configuración o de datos.
- "Config" o "Bloque de configuración"
- Bloque de Renderizado o Inicialización
Bloque de configuración o de datos.
El bloque de configuración o de datos consiste en todos los datos predeterminados que utilizamos en nuestro gráfico. Todo, desde las etiquetas, conjuntos de datos, datos (puntos) y más.
"Config" o "Bloque de configuración"
El bloque de configuración consiste en la referencia del bloque de datos, las opciones y el tipo de gráfico.
Bloque de Renderizado o Inicialización
El bloque de renderización o inicialización inicia o activa el proceso para dibujar el gráfico en la etiqueta canvas a la que se hace referencia.
Vídeo del código de bloque esqueleto de Chart.js
Este video cubre cómo tomar el antiguo código de demostración de la documentación de Chart.js y convertirlo a la versión más reciente, ya que Chart.js comienza a moverse hacia esta estructura.
Si está interesado en obtener el código fuente exacto, puede encontrar la página completa con más explicaciones en esta página específica.
Lo cual incluye el mismo video pero también información adicional sobre los bloques de Chart.js y el código fuente.
Chapter 2: Explorando los bloques render, config y data.
El bloque de renderizado cubre el dibujo del gráfico. Por eso se le llama bloque de renderizado o inicialización. La inicialización se refiere al comienzo, por lo que comienza a dibujar el gráfico desde el principio. Esto se vuelve más importante cuando se utiliza la API chart.destroy. Esta API es esencial si se desea cambiar el tipo de gráfico al hacer clic en un botón.
Diferentes tipos de gráficos en el bloque de configuración.
Chart.js 4 tiene muchos tipos de gráficos diferentes de serie. Algunos de los tipos de gráficos incluyen:
- Un gráfico de barras
- Un gráfico de líneas
- Un gráfico de sectores (pie chart)
- Gráfico de dona
- Gráfico de dispersión
- Gráfico de Burbujas
- Gráfico de radar
- Gráfico de área polar
Además de los tipos de gráficos por defecto, también hay más opciones como el gráfico de combinación, pero esas son solo las opciones básicas que son características integradas en Chart.js. Por supuesto, si eres como la mayoría, siempre quieres jugar con gráficos más avanzados que son más personalizados. Por ejemplo, un gráfico de histograma y más que es un poco más avanzado y lo cubriremos más adelante.
Sin embargo, cambiar los tipos básicos de gráficos es bastante fácil de hacer. Al observar Chart.js, todo lo que necesitas hacer es ir al bloque de configuración e insertar el tipo de gráfico que deseas.
// config block
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
};Aquí puedes ver el elemento en negrita que debe ser ajustado. Sin embargo, ¿qué necesitas hacer si deseas crear una capa de interactividad?
Mientras que los tipos son un elemento interesante, es bastante sencillo. La mayoría de los tipos de gráficos tienen muchas similitudes, pero algunos son diferentes y pueden o no tener un eje como los gráficos de pie y donut. O contienen una estructura diferente como un gráfico de radar. Pronto profundizaremos más en esto, pero primero vamos a ver cómo modificar los datos.
Bloque de datos y conjuntos de datos
La parte más importante donde la mayor parte de la atención se centra es en relación al conjunto de datos. El conjunto de datos es el bloque que cubre el dibujo de los puntos de datos. El objetivo del gráfico es transmitir una historia de números en una imagen, lo que hace que los números sean fácilmente comprensibles para la mente.
Mientras que colocar los números de manera estática es bastante fácil, hacerlos más flexibles es un desafío. La razón principal de esto se debe a la manipulación de matrices. Ser capaz de manipular los datos de una matriz te ayuda a mostrar solo los valores que deben ser vistos.
Muchas personas que trabajan con Chart.js tienden a no entender realmente esta parte. La razón principal es que ven Chart.js de manera diferente. A menudo, cuando descubren que gran parte de Chart.js se basa en matrices, se dan cuenta de que Chart.js es verdaderamente Javascript pero con una gran cantidad de código de API de canvas adjunto.
¿Cómo modificas un array?
Modificar un array generalmente utiliza los 4 más comunes, pero Javascript tiene una lista completa de métodos de array para que los uses. Si realmente quieres entender esto, asegúrate de explorar la Serie de arrays de Chart.js. Cubre muchos elementos diferentes.
Sin embargo, por ahora darle los 4 comunes es una buena introducción. Si deseas más información asegúrate de explorar la serie que cubre 19 videos diferentes sobre manipulación de arrays.
- Método Push de la matriz, agrega un valor al final del arreglo.
- El método de array Pop, elimina el último valor del arreglo.
- Método Push de la matriz, adds value to the beginning of array
- Shift Array Method, removes first array value
Con estos cuatro métodos básicos de arreglo puedes hacer mucho. Entonces, ¿cómo usarlos? Vamos a tomar un ejemplo aquí.
const colors = ['red', 'blue', 'green'];
colors.push('yellow') // colors = ['red', 'blue', 'green', 'yellow'];
colors.pop() // colors = ['red', 'blue', 'green'];
colors.unshift('black') // colors = ['black', 'red', 'blue', 'green'];
colors.shift() // colors = ['red', 'blue', 'green'];Como se puede ver, cada método de arreglo y cómo hacerlo es simplemente adjuntando el elemento de arreglo, que en este caso es "colores", y agregando el método de arreglo al final. Si agrega un valor como con push o unshift, debe definir el valor que se agregará al arreglo.
Esa es la forma más fácil de trabajar con arrays. También hay otra forma más avanzada y poderosa llamada las estructuras de datos en Chart.js.
Estructuras de datos una forma avanzada para conjuntos de datos.
Las estructuras de datos son una de las formas más poderosas y avanzadas de hacer cosas. Chart.js le da a este elemento una sección pequeña, lo cual es una lástima porque las estructuras de datos realmente pueden simplificar la manipulación de matrices. En esencia, las estructuras de datos son objetos de JavaScript que se pueden leer directamente en su gráfico.
Chart.js lo hizo porque a menudo obtenemos datos de JSON o de un objeto y modificar el objeto en múltiples matrices no tendría sentido. Por lo tanto, enseñar a Chart.js a leer una estructura existente sería mucho mejor, lo que presentaron de manera agradable en Chart.js 3.1.
Para entender esto hay varios videos que cubren este tema en una página separada. Asegúrese de ver todos ellos estructura de datos videos.
Sin embargo, para asegurarse de que comprenda la esencia, este video le brindará una comprensión básica.
Los temas más avanzados relacionados con las estructuras de datos se pueden encontrar en la página de estructura de datos . ¡Muy recomendable!
Para utilizar las estructuras de datos, necesitamos reasignar los valores de x e y, ya que debemos indicar a Chart.js dónde obtener el punto de datos en lugar de antes. Para esto, como se observó en el video, utilizamos el análisis de datos y las claves de xAxis y yAxis.
Parsear significa hacer que algo sea legible para el lenguaje al que lo estamos parseando. En este caso, parseamos el nuevo objeto de datos para que sea legible por Chart.js y pueda dibujar el gráfico.
La estructura de datos es una de las mejores cosas de Chart.js, pero no es muy clara ya que es algo que solo notarás una vez que necesites trabajar con datos y gráficos con frecuencia. Ahora que entendemos la parte más importante de los datos, debemos centrarnos en la funcionalidad.
Funcionalidad e interacciones de Chart.js
El uso de colores en Chart.js puede ser muy útil para resaltar algo. Los puntos de datos codificados por colores pueden comunicar algo sin palabras. Por ejemplo, cuando coloreamos un valor negativo en rojo y un valor positivo en verde, hemos comunicado sin decir una palabra. Por muy intuitivo que sea, es probable que el usuario lo entienda.
El color de fondo y el color del borde se configuran dentro del bloque de datos dentro del conjunto de datos. El video aquí controla opciones básicas de codificación de color. Con verde y rojo dependiendo del valor.
Estas opciones por suerte aún no son complicadas ya que funcionan con arreglos. Una vez que entiendas cómo agregar valores a un arreglo, puedes comenzar a jugar con los colores de una manera más intuitiva. Como puedes notar, cada vez que se domina una nueva habilidad, puedes ampliar tus opciones en Chart.js.
Todo lo que se encuentra a continuación son conceptos específicos que necesitan ser reorganizados en capítulos.
Comprendiendo la diferencia entre Tiempo y Series de Tiempo en Chart JS
En Chart.js a menudo tenemos que dibujar gráficos con fechas específicas. Si estás creando un gráfico del mercado de valores donde el gráfico tiene datos solo para los días de semana, tendrás datos faltantes o estáticos los fines de semana y los días festivos. Esto puede no ser deseable y es posible que desees eliminar esas fechas específicas para mantener el gráfico limpio.
Tiempo de Chart JS
El tipo de tiempo en este caso no es útil. Ya que esto calculará el espacio en función de la diferencia de tiempo. Por ejemplo, si el siguiente punto de datos estaría a una semana de distancia del punto de datos actual, calculará 7 segmentos de espacio. Esto crea una gran brecha en nuestro gráfico. Ver la brecha en las escalas x a continuación.
Gráfico de series de tiempo en Chart JS
Chart.js tiene una función integrada para manejar este problema específico que es la serie de tiempo. En ella se establecerá cada fecha en función de la distancia equidistante. Equidistante se deriva de las palabras "igual" y "distancia". En otras palabras, establecerá cada próximo punto de datos en una distancia igual sin importar el lapso de tiempo entre los años. Ver la imagen a continuación:
Por supuesto, al hacer esto necesitaremos modificar cómo se presentan las fechas en la escala, ya que puede haber superposición si hay una gran cantidad de datos comprimidos entre un segmento.
Cómo crear una tabla a partir de conjuntos de datos en Chart JS
Crear una tabla basada en los datos de Chart.js requiere una comprensión detallada de JavaScript. Específicamente, cómo crear elementos de tabla y construir un objeto de tabla en JS.
Lo que se pretende hacer con Chart.js es extraer el objeto de datos que está organizado de manera ordenada para dibujar el gráfico. Esa misma información es útil para crear la tabla. El siguiente video le mostrará exactamente cómo hacerlo.
Cómo crear un gráfico de embudo de ventas en Chart JS
La creación de un gráfico de embudo de ventas en Chart JS es posible. Sin embargo, requiere una personalización avanzada de plugins para que funcione. Lo que necesitamos entender es cómo dibujar formas personalizadas que conviertan las barras en un embudo.
Si está listo para un nivel avanzado de Chart.js, en ese caso, este video será un gran desafío. Seguirá el embudo de ventas y cada paso del embudo, el embudo se reduce en función de los valores del conjunto de datos.
Cómo Guardar un Gráfico como Imagen en Chart JS
Para guardar y descargar un gráfico o un canvas como imagen en Chart JS, necesitamos hacer un poco de trabajo adicional. Por defecto, al hacer clic derecho se puede descargar y guardar el gráfico como imagen, sin embargo, esto no es muy evidente para muchos, por lo que crear un botón de descarga especial es una gran alternativa.
Cómo descargar un canvas como imagen al hacer clic en un botón en Chart JS.
El video a continuación te mostrará exactamente cómo lograr esto. Convertiremos el canvas en un archivo PNG que podemos descargar y guardar en nuestro dispositivo.
¡Próximamente el curso de Skillshare!
He estado trabajando en algunos cursos de Skillshare. Si aún no tienes Skillshare y quieres explorar sus opciones, puedes obtener una semana gratis de Skillshare haciendo clic en este enlace de abajo. Este es un enlace de afiliado que me dará una comisión si te registras, no te costará nada durante este período gratuito. Y la comisión que reciba será reinvertida en tutoriales y en investigación y desarrollo de Chart.js:
Spanish 
English 
Chinese 
French 
German 
Korean 
Portuguese (Portugal) 
Portuguese (Brazil) 
Vietnamese