Hay algo mágico en los gráficos. La curva curva revela instantáneamente toda la situación: la historia del desarrollo de la epidemia, el pánico o un período de prosperidad. Esta línea ilumina, despierta la imaginación, convence.
- Henry D. Hubbard
La cantidad de datos con los que necesita trabajar está en constante crecimiento. Y cuanta más información, más difícil es procesarla. Es por eso que el tema de la visualización de datos se ha vuelto especialmente popular ahora, en forma de gráficos, cuadros, paneles, preferiblemente interactivos. La presentación visual de los datos nos permite a nosotros, las personas, dedicar menos tiempo y esfuerzo a verlos, analizarlos y comprenderlos, así como a tomar las decisiones correctas e informadas basadas en esto.
Es poco probable que alguien niegue que en la moderna web HTML5, JavaScript es la tecnología más universal y simple para visualizar datos. Entonces, si está involucrado en el desarrollo front-end, lo más probable es que ya haya lidiado con la creación de gráficos JS, o lo encontrará en el futuro (pronto).
Hay
muchas bibliotecas de JavaScript para crear gráficos y tablas, cada una de las cuales (como cualquier otra herramienta) tiene sus ventajas y desventajas. Para hacerte la vida más fácil, decidí hablar sobre los que más me gustan. Creo que las siguientes diez bibliotecas son las mejores bibliotecas JS para crear gráficos, y realmente pueden ayudar a resolver casi cualquier tarea de visualización de datos. Repasemos la lista juntos y asegúrese de conocerlos al menos fundamentalmente y de que no haya perdido de vista ninguna buena biblioteca que pueda ser útil en proyectos grandes actuales o futuros.
Bueno, comencemos: ¡aquí están las mejores bibliotecas JS para la visualización de datos!
amCharts
amCharts es una de las bibliotecas de JavaScript útiles para aquellos que buscan una solución simple y al mismo tiempo flexible para la visualización de datos.
Características clave
- Muchos tipos diferentes de gráficos, incluidos mapas interactivos y diagramas de Gantt.
- La capacidad de analizar datos "en profundidad" (desglose) y otras opciones interactivas bien diseñadas.
- La documentación que describe todos los métodos necesarios está bien escrita, aunque para mi gusto, no es muy conveniente de usar.
- Animación genial de gráficos.
- Integración con React, Angular, Vue, Ember, etc.
- Complemento listo para usar para WordPress.
- Exporte gráficos a una imagen o archivo PDF.
- Gráficos en vivo, personalización completa, características especiales de acuerdo con los estándares W3C.
- Soporte técnico completo para todos los usuarios y prioridad para clientes con licencia.
- Clientes: Microsoft, Amazon, Ebay, NASA, Samsung, Yandex, AT&T, etc.
Costo
Marca con referencia en la versión gratuita. Para eliminar la marca, debe comprar una licencia paga (desde $ 180), además se proporciona acceso a soporte prioritario.
Obtenga más información sobre amCharts
Anychart
AnyChart es una biblioteca JS multifuncional, ligera y bien desarrollada para visualizar datos con renderizado en SVG / VML. Permite a los desarrolladores web crear todo tipo de gráficos y cuadros para tomar más decisiones basadas en ellos.
Características clave
- Más de 80 tipos de gráficos, incluidos gráficos convencionales, gráficos de acciones, geovisualizaciones (mapas), así como gráficos de Gantt y gráficos de red PERT.
- Hay muchas opciones para cargar datos: XML, JSON, CSV, JS API, Google Sheets, tablas HTML.
- La capacidad de "profundizar" en los datos del gráfico (desglose).
- Indicadores técnicos para análisis técnicos y anotaciones (herramientas de dibujo) "listos para usar".
- Documentación completa y descripción de la API, soporte receptivo.
- Integración con Angular, Oracle APEX, React, Elasticsearch, Vue.js, Android, iOS, etc. Para los desarrolladores de aplicaciones y paneles en Qlik hay una extensión especial preparada para Qlik Sense.
- Una gran cantidad de ejemplos listos de gráficos, cuadros, paneles, así como su propia caja de arena especial con código de autocompletado.
- Soporte para navegadores antiguos.
- Exportar datos en varios formatos, incluidos informes en PDF; Jpg, png, imagen svg; Archivos de datos Excel (XLSX) o CSV con gráficos.
- Clientes: Oracle, Microsoft, Citi, Samsung, Nokia, AT&T, Ford, Volkswagen, Lockheed Martin, etc.
Costo
La versión de marca de agua es gratuita. Para deshacerse de la marca y tener la oportunidad de usar AnyChart en proyectos comerciales, debe comprar una licencia (desde $ 49).
Obtenga más información sobre AnyChart
Chart.js
Chart.js es una biblioteca JavaScript simple y al mismo tiempo bastante flexible para la visualización de datos, popular entre los diseñadores y desarrolladores web. Es una excelente solución básica para aquellos que no necesitan una amplia variedad de tipos de gráficos y configuraciones individuales, pero que necesitan lo suficiente para que los gráficos se vean limpios, claros e informativos.
Características clave
- 8 tipos de gráficos y tablas: lineal (Línea), lineal con áreas (Área), reglado (Bar), circular (Pie), pétalo "Radar" (Radar), polar (Polar), burbuja (Burbuja) y diagrama de dispersión ( Dispersión).
- Todos los tipos de gráficos se pueden personalizar y proporcionar animación, y todos son adaptables cuando se trabaja en la red.
- La funcionalidad se puede mejorar mediante el uso de complementos.
- Buena documentación
- Soporte a través de Stack Overflow.
- Soporte para navegadores IE9 +.
Costo
Biblioteca gratuita de código abierto. Publicado bajo la licencia MIT.
Obtenga más información sobre Chart.js
Chartart.js
Chartist.js es una biblioteca JS de código abierto simple que también se puede usar para crear gráficos y tablas adaptables. En términos generales, es adecuado para aquellos que solo necesitan gráficos elementales de líneas, barras o gráficos circulares y no necesitan mucho en términos de visualización de datos. Aspecto agradable, y no hay necesidad de una gran cantidad de todo tipo de características.
Características clave
- Solo 3 tipos de gráficos: línea, barra, pastel.
- Gran animación
- La documentación de la API contiene toda la información necesaria, pero no es muy conveniente usarla (prepárate para desplazarte mucho).
- Permite el uso de complementos para ampliar la funcionalidad.
- Utiliza SVG para dibujar gráficos.
- Soporte para navegadores antiguos.
Costo
De código abierto, uso gratuito para cualquier propósito.
Obtenga más información sobre Chartist.js
D3.js
D3.js es una potente biblioteca de visualización de datos JavaScript de código abierto. Tiene más de 20 mil tenedores en GitHub. En esencia, D3 se parece más a un framework que a una biblioteca. Trabajar con ella no es tan fácil, especialmente al principio. Pero hay muchos recursos de información útiles en D3. Y al final, con la ayuda de esta biblioteca, puede crear visualizaciones originales sorprendentes y cualquier gráfico desde cero, lo que hace que D3 sea una herramienta realmente valiosa.
Características clave
- Admite numerosos tipos de gráficos, mucho más que la gran mayoría de otras bibliotecas de JavaScript (incluido, por ejemplo, el diagrama de Voronoi).
- Se necesita tiempo para dominar. Menos claro y obvio que algunas de las bibliotecas comerciales de la lista (por ejemplo, AnyChart). Compensado por una gran cantidad de tutoriales y una API realmente genial.
- Combina potentes componentes de visualización con un enfoque basado en datos para manipular el DOM.
- Depura fácilmente con una herramienta de navegador.
- Muchos ejemplos
- Funciones de generación de curvas.
- Arrastrar y soltar GUI.
Costo
D3 es una biblioteca de código abierto para crear gráficos y tablas, que es absolutamente gratuita para cualquier uso.
Obtenga más información sobre D3.js
Gráficos de fusión
FusionCharts es otra buena biblioteca para construir gráficos y cuadros interactivos, con cientos de ejemplos listos. Los gráficos FusionCharts admiten datos JSON y XML. Renderizado: a través de HTML5 / SVG y VML.
Características clave
- Docenas de tipos de gráficos, 2D y 3D, y más de 950 mapas que cubren todos los continentes.
- Gráficos y mapas animados y totalmente interactivos.
- API de servidor para ASP.NET, PHP, Ruby on Rails.
- Compatible con jQuery, Angular, PHP, ASP.NET, React Native, Django, React, Ruby on Rails, Java, etc.
- Una guía de usuario bastante detallada y una descripción de la API.
- Muchos ejemplos de gráficos y tableros.
- Soporte para navegadores antiguos.
- Exportar a PNG, JPG y PDF.
- Apoyo: a través de la base de conocimientos y el foro de la comunidad.
- Soporte de prioridad ilimitada para usuarios que compran una licencia.
- Clientes: Apple, IBM, Google, Intel, Microsoft, PayPal, Oracle, Adobe, etc.
Costo
Gratis para uso no comercial. Licencias pagas para uso comercial (desde $ 497).
Obtenga más información sobre FusionCharts
Cartas de Google
Google Charts es una excelente opción para aquellos proyectos en los que la simplicidad y la estabilidad de los gráficos son preferibles a configuraciones de personalización complejas y detalladas.
Características clave
- Representación de gráficos en HTML5 / SVG y VML.
- Muchos ejemplos de gráficos, cuadros, tableros.
- Todos los gráficos son interactivos, algunos también pueden ser zoom y panorámica.
- Documentación completa
- Soporte para navegadores antiguos.
- Soporte a través de preguntas frecuentes, GitHub y foro.
Costo
Licencia gratuita, pero el código fuente no está abierto. No le permite alojar archivos Google JS en su servidor, por lo que puede no ser adecuado para usted si trabaja con datos confidenciales.
Obtenga más información sobre los gráficos de Google
Highcharts
Highcharts es una de las bibliotecas de JavaScript más versátiles y populares para crear gráficos y tablas en HTML5, con renderizado en SVG (VML). Es liviano, admite una amplia selección de diferentes tipos de visualizaciones y proporciona un alto rendimiento.
Características clave
- Utiliza javascript puro. Los datos se pueden descargar externamente.
- Documentación digna y descripción Documentación API, casos de usuarios.
- Interactividad, incluida la obtención de detalles (la capacidad de analizar datos "en profundidad").
- Se puede usar con React, Angular, Meteor, .NET, iOS, etc.
- Exportar a PNG, JPG, PDF y SVG.
- Soporte para usuarios de la versión gratuita a través del foro y Stack Overflow. El soporte premium por correo electrónico y Skype solo está disponible para usuarios comerciales que poseen la licencia correspondiente.
- Clientes: Visa, Yahoo!, Facebook, Twitter, Groupon, Nokia, Ericsson, Mastercard, Yandex, etc.
Costo
Gratis para uso no comercial. Para uso comercial, debe comprar una licencia (desde $ 50).
Obtenga más información sobre Highcharts
Plotly.js
Plotly.js es una biblioteca de JavaScript de código abierto, gratuita y de alto nivel. Construido sobre D3.js y WebGL. Se puede utilizar para crear muchos tipos diferentes de visualización de datos, incluidos, por ejemplo, gráficos estadísticos tridimensionales.
Características clave
- 20 tipos de gráficos y tablas que pueden integrarse en el sitio o usarse para crear presentaciones dinámicas.
- Se utiliza como una biblioteca de gráficos basada en navegador para Python, R, MATLAB, abstrayendo gráficos en una estructura JSON declarativa.
- Amplia documentación de API.
- Buena animación
- Utiliza React.
- Exportar gráficos a PNG y JPG. La exportación a EPS, SVG y PDF está disponible por suscripción.
- Muchos ejemplos ya hechos.
- Puede funcionar con hojas de cálculo de Excel o directamente con su base de datos.
- Foro de soporte.
Costo
Biblioteca gratuita de código abierto.
Obtenga más información sobre Plotly.js
Zingchart
ZingChart es una herramienta útil para crear gráficos interactivos y adaptativos. Esta es una biblioteca rápida y flexible que hace que sea bastante fácil trabajar con grandes datos y generar gráficos con grandes cantidades de datos.
Características clave
- Admite más de 30 tipos de gráficos y tablas.
- Totalmente personalizable, con configuraciones de diseño a la CSS.
- Compatible con jQuery, Angular, Node.js, PHP, etc.
- Trabaje con datos en tiempo real, representación rápida de conjuntos de datos de cualquier tamaño.
- Los datos se pueden cargar a través de objetos JS, JSON, CSV, PHP, AJAX, MySQL.
- Documentación API detallada y bastante legible.
- Soporte gratuito y premium a través del centro de ayuda ZingChart, Stack Overflow, correo electrónico y chat.
- Clientes: Microsoft, Boeing, Adobe, Apple, Cisco, Google, Alcatel, etc.
Costo
La licencia de marca proporciona acceso completo a la biblioteca ZingChart de forma gratuita. Para uso comercial, se requiere una licencia paga (desde $ 199).
Obtenga más información sobre ZingChart
Conclusión
Por lo tanto, he enumerado las mejores bibliotecas de JavaScript para crear gráficos y tablas, al menos las que considero de primera categoría. Compararlos todos juntos exhaustivamente, teniendo en cuenta absolutamente todos los parámetros, sería muy difícil. Cada uno tiene sus pros y sus contras, y la elección depende en gran medida de las habilidades del desarrollador, así como de la tarea específica.
Por supuesto, hay algunas características, características que hacen que una biblioteca sea más rápida, más bonita en términos de diseño o más flexible que otras. Pero, al final, no es tan importante qué bibliotecas están en la lista, porque al final, la mejor es la que cumple más plenamente sus requisitos específicos como parte de una sola tarea.
Mi consejo es conocer todas estas bibliotecas líderes al menos un poco más de cerca: cuando necesita gráficos JS para visualizar datos en un proyecto en particular, es muy probable que una o más de ellas le convengan mejor. Si desea tratar la lista de manera más auténtica, preste atención a la
comparación en Wikipedia .
Si necesita visualizar datos en mapas interactivos, donde las tendencias geográficas, las relaciones, las relaciones, los flujos, etc. son de suma importancia, lea mi artículo anterior sobre las
mejores bibliotecas de JavaScript para visualizar geográficamente datos en forma de mapas (hay una
traducción al ruso en Habré) .
¡Que tenga un buen día y disfrute de la visualización de datos usando JavaScript!
Esta es mi traducción del artículo de las principales bibliotecas de gráficos de JavaScript para cada necesidad de visualización de datos que publiqué anteriormente en Hacker Noon .