Bibliotecas de gráficos de JavaScript: 13 opciones populares

#1 – Gráfico.js

Chart.js es una biblioteca de gráficos práctica que utiliza <canvas> de HTML5 para representar los gráficos.

La biblioteca es fácilmente la mejor opción para proyectos simples, por razones como que responde de manera predeterminada y también puede aplicar efectos de animación según el comportamiento del usuario.

Estos son los 8 tipos de gráficos que puede crear con Chart.js:

• Gráfico de área
• Gráfico de barras
• Gráfico de burbujas
• Gráficos circulares y de anillos
• Gráfico de linea
• Tipos de gráficos mixtos
• Gráfico de área polar
• Carta de radar

En cuanto a la facilidad de uso, la sintaxis es simple, e incluso si nunca antes ha trabajado con JavaScript, crear un nuevo gráfico es sencillo.

 const data = { labels: [ 'Red', 'Blue', 'Yellow' ], datasets: [{ label: 'My First Dataset', data: [300, 50, 100], backgroundColor: [ 'rgb(255, 99, 132)', 'rgb(54, 162, 235)', 'rgb(255, 205, 86)' ], hoverOffset: 4 }] };

Si desea ampliar los gráficos con funciones dinámicas y agrupación de datos, la biblioteca tiene un sistema de complementos que puede usar para agregar nuevas funciones.

Ejemplo de Chart.js

Consulte la Prueba de concepto con lápiz: Chart.js con degradado de fondo de Sven (@hofmannsven) en CodePen.

Recursos adicionales de Chart.js

• Chart.js + Next.js = hermosos tableros basados ​​en datos
• Primeros pasos con Chart.js; Aprendizaje basado en tareas

#2 – D3.js

Permítanme comenzar diciendo que D3 es una herramienta de visualización de datos en lugar de una biblioteca de gráficos tradicional.

D3 le permite especificar un conjunto de datos y vincularlo al DOM, luego puede usar las funciones de las bibliotecas para transformar esos datos en una representación visual única. En cuanto a la presentación visual, D3 aprovecha las tablas HTML, SVG y <canvas> para representar los datos en una página.

Si alguna vez ha visto uno de esos globos giratorios basados ​​en la ubicación geográfica con múltiples puntos de datos interactivos, lo más probable es que la presentación se haya creado con D3. Sin embargo, también funciona bien para usos prácticos, como el gráfico básico que puede ver en la demostración a continuación. En última instancia, querrá consultar la sección de tutoriales oficiales de D3 para explorar sus capacidades más complejas.

Ejemplo de D3.js

Consulte el gráfico Pen D3 + ReactJS de Web Dev (@ronaldmarin) en CodePen.

Recursos adicionales de D3.js

• Tutorial de D3.js
• Creación de un mapa de calor de calendario D3.js

#3 – Gráficos electrónicos de Apache

Una de las razones por las que Apache ECharts es tan popular es que obtienes acceso a cientos de ejemplos de gráficos prefabricados desde el primer momento. Puede verificar esto usted mismo visitando el directorio de ejemplos. Esta página cubre gráficos y ejemplos en categorías como líneas, barras, gráficos circulares, dispersión, mapas de calor, gráficos y mucho más.

Y cada ejemplo tiene ejemplos de código JavaScript y TypeScript incluidos. Pero eso no es todo, hay algunos beneficios reales al usar esta biblioteca. Éstos son algunos de ellos:

• Transmisión de datos. ¿Quiere crear gráficos interactivos con millones de puntos de datos? ECharts usa WebSockets para transmitir datos de modo que se puedan cargar de forma asincrónica incluso con conjuntos de datos extremadamente grandes.
• Compatible con dispositivos móviles. Cuando los usuarios ven un gráfico electrónico en sus dispositivos móviles, el gráfico en sí se ha optimizado para proporcionar funciones interactivas: zoom, panorámica y representación SVG para garantizar la mejor capacidad de entrega.
• Datos dinámicos. Puede alimentar ECharts con múltiples puntos de datos (separados), y la biblioteca animará automáticamente el gráfico para brindar a los usuarios una experiencia interactiva.
• Accesibilidad. Apache ECharts (v4.0 y superior) está diseñado para seguir las pautas de WAI-ARIA.

También puede mostrar sus gráficos en su sitio web usando un CDN externo.

Ejemplo de gráficos electrónicos de Apache

Consulte el ejemplo de Pen Apache Echart de Vale (@vsigno) en CodePen.

Recursos adicionales de Apache ECharts

• Cree una mejor herramienta GitHub Insight en una semana

#4 – Trazado

Plotly es la empresa matriz de Dash, una solución de código bajo para la implementación de aplicaciones de datos. Y desarrollan su propia biblioteca de gráficos, Plotly , en las instalaciones.

Con Plotly, puede crear las visualizaciones de gráficos más básicas, pero el verdadero poder de la biblioteca radica en la capacidad de producir gráficos basados ​​en estadísticas, representaciones de datos en 3D y gráficos basados ​​en datos financieros.

Está disponible como módulo de Node.js, pero también se puede usar directamente desde una CDN.

Ejemplo gráfico

Consulte la anotación Pen Add en el evento de clic de plotly (@plotly) en CodePen.

#5 – Frappé

La biblioteca de gráficos de Frappe está hecha por la gente que creó Frappe Framework. Esta biblioteca es tan simple como parece. Y esa simplicidad es un factor importante que contribuye a la popularidad de la biblioteca.

La biblioteca no requiere dependencias externas y puede generar gráficos SVG aptos para dispositivos móviles con solo unas pocas líneas de código. Aquí hay un ejemplo de código para un gráfico de eje básico:

 data = { labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], datasets: [ { values: [18, 40, 30, 35, 8, 52, 17, -4] } ] } new frappe.Chart( "#chart", { data: data, type: 'bar', height: 180, colors: ['red'] });

Y este pequeño fragmento se traduciría en un gráfico como este:

También hay soporte para gráficos mixtos (múltiples gráficos en uno), anotaciones, mapas de calor y una API está disponible si planea actualizar datos en tiempo real o exportarlos.

Ejemplo de frappé

Vea el Pen Frappe Hello World de Jang Rush (@weakish) en CodePen.

#6 – Gráficos de Apex

ApexCharts es en gran medida una biblioteca de gráficos tradicional. La principal diferencia entre ApexCharts y Frappe (por ejemplo) es que ApexCharts proporciona un poco más de demostración. Pero, también, ofrece soporte nativo para marcos populares como React, Vue y Angular. Esto también significa que todos los gráficos de demostración tienen sus respectivas muestras escritas en la sintaxis de dichos marcos.

En cuanto a las características, todos los gráficos se generan en formato SVG y son aptos para dispositivos móviles de forma predeterminada. También puede aprovechar funciones como animaciones fluidas y anotaciones, y personalizar la paleta de temas de gráficos eligiendo uno de los 10 estilos de muestra.

Ejemplo de ApexCharts

Consulte Pen Realtime Dashboard de ApexCharts (@apexcharts) en CodePen.

#7 – G2

Recientemente hablé sobre Ant Design en varias ocasiones, incluso en mis artículos sobre bibliotecas de componentes para React.js y Vue. Ant no solo es extremadamente popular en GitHub, sino que las comunidades los aman en todas las regiones del mundo.

Y la biblioteca de gráficos G2 (o como la llaman "Gramática de visualización") es la implementación de Ant Design de un sistema de gráficos que utiliza Ant Design System. Recomiendo encarecidamente consultar la página de inicio de AntV, donde encontrará muchas otras bibliotecas relacionadas con la visualización de datos en tiempo real.

Se usa con mayor frecuencia para crear cosas como paneles de administración, crear rutas de datos y hacer ejemplos de visualización de datos interactivos utilizando su motor de renderizado. Este motor puede generar gráficos y vectores de datos a través de WebGL, Canvas y SVG. Y debido a que la biblioteca es conectable, puede mejorar aún más sus presentaciones de gráficos a través de bibliotecas más sólidas como D3.js (que vimos anteriormente).

#8 – Visión áspera

La biblioteca roughViz de Jared Wilber es una combinación de 3 bibliotecas diferentes: D3.js, Rough.js y práctico: un procesador de bocetos dibujados a mano. Como puede ver en la captura de pantalla de ejemplo anterior, esta no es su biblioteca de gráficos típica. roughViz está construido completamente con el propósito de ayudarlo a crear gráficos dibujados a mano con estilo de boceto usando JavaScript.

Este tipo de biblioteca será una gran adición a los proyectos personales, en otras palabras, proyectos que requieren una chispa más creativa que el enfoque tradicional de estilo profesional. Y la sintaxis en sí es tan simple como podría ser, muy en línea con Frappe y ApexCharts.

Puedes verlo por ti mismo en la demostración a continuación.

Ejemplo de visualización aproximada

Vea la demostración de Pen RoughViz de Danny Englishby (@DanEnglishby) en CodePen.

#9 – Gráficos ligeros

Si está trabajando en un proyecto relacionado con las finanzas (o la criptomoneda para el caso), está bastante claro que muchas de las bibliotecas de gráficos mencionadas anteriormente simplemente no son suficientes. Como tal, aquí está Lightweight Charts: una biblioteca de gráficos creada específicamente para mostrar tablas y gráficos basados ​​en finanzas.

Esta biblioteca no solo es de código abierto y liviana, sino que también incluye todas las características necesarias que se requerirían para mostrar datos de gráficos sobre finanzas y su estructura dinámica.

Una de esas características es la transmisión de datos, que le permite pasar datos en tiempo real a su lienzo y luego actualizarlos sin que el usuario necesite actualizar la página. Y otro factor que puede estar considerando es el rendimiento, que no debería ser un problema como se explica en la página de inicio de esta biblioteca,

“Nuestras soluciones de gráficos se diseñaron desde el principio para funcionar con grandes conjuntos de datos. Los gráficos se mantienen receptivos y ágiles incluso con miles de barras, incluso con actualizaciones varias veces por segundo con nuevos ticks”.

Consulte la demostración a continuación para tener una idea, pero también muchas de las opciones y características de los gráficos.

Ejemplo de gráficos ligeros

Consulte el gráfico avanzado Pen tradingview de truong (@truong160196) en CodePen.

Gráficos ligeros Recursos adicionales

• Gráficos financieros para su aplicación

#10 – Cartelera

Billboard es una biblioteca de gráficos de interfaz basada en D3. Tiene todas las características modernas que esperarías: representación SVG, soporte táctil para dispositivos móviles, una interfaz simple y excelente documentación de API.

Sin embargo, mi característica favorita, y posiblemente también para muchas otras, es que Billboard proporciona más de 230 ejemplos de los gráficos que puede crear con esta biblioteca. Estos ejemplos se dividen en categorías de gráficos como Básico, Eje, Datos, Cuadrícula, Interacción, Región y muchos otros.

Esto significa que no solo puede encontrar el tipo de gráfico correcto para su proyecto y sus requisitos, sino que también puede explorar otras opciones y ver si un ejemplo en particular capta su atención.

Ejemplo de Billboard.js

Consulte las solicitudes de gráfico de pluma: Billboard.js de DTCC (@dtcc) en CodePen.

#11 – Perspectiva

Perspective es uno de los proyectos que opera FINOS (Open-Source Fintech), y el mismo FINOS también es parte de la Fundación Linux. Al igual que los gráficos ligeros, Perspective.js está orientado a proporcionar soluciones de gráficos para proyectos basados ​​en finanzas. Sin embargo, es capaz de mucho más que eso y se usa con frecuencia en proyectos relacionados con el comercio electrónico, las cuadrículas de datos y la segmentación de envíos.

Si alguna vez ha visto gráficos sobre Covid-19, aeropuertos y eventos deportivos importantes como los Juegos Olímpicos, es muy probable que la integración de la interfaz y el flujo de datos se haya realizado con Perspective. Tiene una rica interfaz de usuario, optimizada para flujos de datos y análisis complejos en tiempo real.

Está disponible para desarrolladores de JavaScript y Python y utiliza el componente web de elementos personalizados.

#12 – Gráfico de interfaz de usuario de tostadas

En todo caso, la biblioteca de gráficos de Toast UI es otra opción a considerar en lo que respecta a los estilos de gráficos y su diseño. La funcionalidad aquí es muy similar a las bibliotecas que ya hemos visto.

Creo que el área en la que Toast UI difiere de otras opciones es su especificación API. Es probablemente una de las mejores API que puede tener en sus manos, y viene con documentación detallada complementaria. Una de las características de la API es Instancias , una forma de cambiar dinámicamente los datos del gráfico, ya sea porque su fuente de datos ha cambiado o por la entrada del usuario.

Los tipos de gráficos que admite Toast incluyen barras, columnas, líneas, áreas, burbujas, mapas de árbol, radares, barras radiales y otros. La forma preferida de usar esta biblioteca es a través de npm, pero hay un CDN disponible, y todo lo que tiene que hacer es especificar un contenedor div id="chart" para el lugar donde desea que se muestre el gráfico.

#13 – Recetas

Si está trabajando principalmente con React.js, la biblioteca Recharts se basa en D3.js con React. Respeta la arquitectura de componentes nativos de React.js y los gráficos creados con Recharts se pueden desacoplar y reutilizar como componentes individuales en las páginas que necesite.

Todos los ejemplos de gráficos tienen su estructura de componentes escrita previamente en caso de que quiera probarlos en un proyecto existente. La biblioteca se lanzó por primera vez en 2016, pero aún está en desarrollo activo.

Ejemplo de recargas

Vea los Pen ReCharts de binu (@binutomy) en CodePen.