Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)
La información está por todos lados. La usamos para optimizar el rendimiento, brindar servicios y mejorar la eficiencia. Sin embargo, los números sin procesar no siempre son la mejor forma de transmitir información. Es más probable que las personas recuerden los datos que les estés presentando si están en formato visual en lugar de textual. Esto convierte a los gráficos en una herramienta indispensable para compartir información.
JavaScript proporciona muchas bibliotecas gratuitas que puedes usar para crear gráficos en tus sitios web. En esta publicación, crearemos una lista de las mejores bibliotecas gratuitas de gráficos en JavaScript y proporcionaremos una breve descripción general de sus características para ayudarte a tomar una decisión informada.
1. Chart.js
Una de las primeras bibliotecas que vienen a la mente cuando pensamos en dibujar gráficos en un sitio web es Chart.js. Las dos principales ventajas del uso de esta biblioteca son que es muy fácil de aprender y de integrar en tu sitio web, y también ofrece la posibilidad de crear ocho tipos comunes de gráficos. Entre estos se encuentran el gráfico de líneas, el de barras, el de radar, el de burbujas, el de dispersión, el de área, el circular y el polar. También puedes mostrar más de dos tipos de gráficos en la misma imagen.
Demostración animada de rozklad.
La biblioteca usa el elemento canvas de HTML5 para representar todos los gráficos, y esos gráficos son responsivos de forma predeterminada. Esto significa que se adaptarán para ajustarse a las variaciones de los tamaños de las pantallas. También es posible animar diferentes aspectos de los gráficos con los métodos listos para ser usados que proporciona la biblioteca.
2. Chartist.js
La biblioteca Chartist.js es otra solución fácil de usar para las personas que quieren crear sus propios gráficos con la ayuda de JavaScript. Existen algunas similitudes, así como diferencias fundamentales, entre Chart.js y Chartist.js.
Demostración de Chartist de Ian Whitfield.
Esta biblioteca es liviana y responsiva, al igual que Chart.js. También es fácil de aprender y permite la creación de todos los tipos de gráficos básicos, como los gráficos de líneas, los de barras y los circulares, etcétera. La biblioteca no tiene dependencias externas que debas cargar para que los gráficos funcionen.
Una gran diferencia entre Chart.js y Chartist.js es que esta última representa sus gráficos usando SVG. Todos los gráficos están divididos en muchos subtipos. Por ejemplo, puedes crear gráficos de líneas simples, así como gráficos de líneas con las áreas subyacentes rellenas o gráficos de líneas bipolares.
Chartist.js se concentra estrictamente en proporcionar la funcionalidad necesaria para representar gráficos. Esto significa que no obtendrás funcionalidad integrada para el manejo de eventos o para mostrar etiquetas, etcétera. Sin embargo, agregar esto por tu cuenta es relativamente sencillo.
3. D3.js
La biblioteca D3.js, abreviatura de Data Driven Documents (documentos controlados por datos), es uno de los pesos pesados en el área de la visualización de datos. Puedes usar esta biblioteca para representar datos visualmente de la forma que desees. Esto también incluye tipos de gráficos estándar.
Demostración de D3 de Jahid Hssan.
La mayor ventaja de esta biblioteca es el poder y la flexibilidad que obtienes cuando se trata de crear cualquier gráfico. La biblioteca te permite crear casi cualquier cosa que pueda imaginar para representar tus datos. No tienes la limitación de poder crear solamente los tipos de gráficos comunes. La biblioteca utiliza una combinación de tecnologías, como SVG, Canvas y HTML, para crear cualquier elemento visual.
Tanta flexibilidad en términos de representación significa que habrá una curva de aprendizaje pronunciada para usar todo lo que la biblioteca tiene para ofrecer. Hay alrededor de 30 módulos y más de 1000 métodos para ayudarte a hacer el trabajo.
4. C3.js
Quizá algunas personas sientan entusiasmo por el uso de D3.js para crear gráficos en sus sitios web, pero podrían desanimarse por la pronunciada curva de aprendizaje. ¿Y si te dijera que hay una solución a este problema?
La biblioteca C3.js proporciona un punto medio en el que los gráficos que creas siguen usando D3.js tras bambalinas, pero no tienes que pasar tanto tiempo escribiendo el código para hacer eso ni aprender cada detalle de la biblioteca D3.js. Es una excelente solución para las personas que están interesadas principalmente en la creación de gráficos basados en D3.js.
Demostración de C3 de Beat Temperli.
Tres características que hacen que la biblioteca sea útil son su facilidad de uso, las opciones de personalización y el control que tienes sobre los gráficos representados. Esta biblioteca es básicamente un contenedor de D3.js, por lo que hace todo el trabajo pesado necesario para crear un gráfico.
La biblioteca también asigna clases personalizadas a cada elemento que representa, lo que te facilita el proporcionar tu propio estilo. Finalmente, hay bastantes devoluciones de llamada que puedes usar para controlar el comportamiento de los gráficos, incluso después de que hayan sido representados.
5. Frappe Charts
Frappe Charts es una increíble biblioteca de código abierto que te ayuda a crear gráficos elegantes y responsivos con facilidad. No hay dependencias adicionales que debas cargar para representar los gráficos.
Demostración de Kamal Dev.
La biblioteca viene con muchos tipos de gráficos integrados, como gráficos de barras, de líneas, de áreas, circulares y de anillo. También puedes crear gráficos basados en porcentajes que muestren la participación de diferentes elementos, similar a un gráfico circular, pero en una barra en lugar de un círculo. También puedes crear gráficos de mapa de calor, similares a los que muestra GitHub para las contribuciones a los repositorios.
Una de las características que te gustará de esta biblioteca es la cantidad de personalización que proporciona. Los mensajes emergentes de tipo "tooltip" que vienen con la biblioteca son fantásticos. También puedes hacer anotaciones sobre tus gráficos marcando diferentes líneas y regiones. Existen muchas opciones de configuración disponibles, e incluso puedes modificar los puntos de datos después de haber sido representados.
6. Plotly.js
Plotly.js también es una biblioteca gratuita de código abierto en JavaScript que viene con una lista ampliada de características. La biblioteca también tiene módulos para Python y R, en caso de que quieras dibujar gráficos en esos lenguajes.
Demostración de plotly.
Plotly tiene su base en D3.js y stackgl. Sin embargo, a diferencia de D3, los desarrolladores de Plotly se enfocaron específicamente en hacer que sea mucho más fácil de usar y en dibujar tipos de gráficos comunes con bastante rapidez. Esto es ideal para las personas que buscan muchos tipos diferentes de gráficos. Plotly puede ayudarte a crear 40 tipos diferentes de gráficos que cubren todo, desde gráficos de líneas básicos, gráficos de barras y diagramas de dispersión hasta gráficos estadísticos como histogramas y diagramas de densidad 2D.
La biblioteca viene con gestión de eventos integrada y cubre todas tus necesidades en cuanto a eventos clic, desplazamiento con el ratón y selección, entre otros. También ofrece muchas otras opciones de configuración y funciones útiles, como el acercamiento y alejamiento, barridos y restablecimiento, etcétera. Plotly.js te brinda la posibilidad de hacer que los gráficos sean editables, además de que te permite usar tus propias configuraciones regionales para mostrar texto en etiquetas.
7. Apex Charts
Apex Charts se describe a sí misma como una moderna biblioteca de gráficos en JavaScript para crear gráficos interactivos con una API simple. La creación de gráficos con esta biblioteca es realmente un proceso sencillo. Solamente necesitas enviar todos los datos necesarios, como el tipo de gráfico, las etiquetas y el conjunto de datos que quieras trazar como un objeto con pares clave-valor, y la biblioteca se encargará de representar todo.
Demostración de Rubén Prol.
Algunas otras características notables de esta biblioteca son la posibilidad de crear diferentes gráficos y luego sincronizarlos. Los cambios que hagas en un gráfico se reflejarán a continuación en el otro. Hay muchas opciones disponibles para interactuar con los gráficos. Puedes hacer acercamientos y alejamientos, barridos, así como desplazarte por los datos hacia arriba y hacia abajo.
Entre los tipos de gráficos disponibles se encuentran el gráfico de líneas, el de barras, el circular y el de anillo, el de radar y el de velas, entre otros. También puedes mezclar diferentes tipos de gráficos, como mostrar gráficos de barras, de líneas y de área superpuestos uno encima del otro. También es posible agregar tus propias anotaciones y actualizar los datos del gráfico de manera dinámica.
8. uPlot
La biblioteca de gráficos uPlot en JavaScript afirma ser una solución compacta y rápida para las personas que quieran mostrar una gran cantidad de puntos de datos sin efectos adversos en el rendimiento. También proporcionan una comparación de velocidad con respecto a algunas bibliotecas populares de gráficos en su página de GitHub.
Un ejemplo de una métrica de rendimiento sorprendente es que la biblioteca puede trazar alrededor de 150,000 puntos de datos en 135 ms. Otras de sus funciones son la capacidad rápida y responsiva de acercar y alejar, además de capacidades de desplazamiento con el ratón. La siguiente demostración de CodePen crea un gráfico con 100 mil puntos de datos.
Demostración de Stephen Wicklund.
Entre algunas de las características útiles de la biblioteca se encuentran los múltiples ejes "y", escalas y cuadrículas. Tipos de escalas diferentes, como la lineal y la logarítmica. Puedes usar la biblioteca para crear gráficos de líneas, de barras y de área, entre otros tipos. El aspecto de los gráficos puede personalizarse con propiedades como el trazo, relleno y guiones.
Sin embargo, hay un par de detalles que podrían disuadirte de usar esta biblioteca. El increíble aumento en el rendimiento tiene su precio. La biblioteca no ofrece transiciones ni animaciones integradas. Tampoco hay un comportamiento integrado para gestionar el desplazamiento y el acercamiento y alejamiento. Sin embargo, existen plugins que pueden proporcionarte esa funcionalidad.
Pensamientos finales
Hemos cubierto 8 bibliotecas de gráficos populares y gratuitas en JavaScript que intentan abordar diferentes tipos de necesidades. Cada una de ellas tiene sus propias fortalezas y debilidades, así que puedes elegir aquellas que hagan el trabajo por ti y cumplan con todos tus requisitos. Por ejemplo, Chart.js es excelente si quieres algo simple y fácil de usar, o elige Apex Charts para crear gráficos más avanzados.
Consulta otras demostraciones publicadas por las bibliotecas en sus páginas para ver cuáles son capaces de brindar las funciones que desees.
By
