9 bibliotecas de Javascript para construir gráficos interactivos
Así que tienes en tu mano toneladas de datos, con una serie de variables, que tienes que transmitir de alguna manera a otra persona. Los datos en bruto y no organizados les resultarán difíciles de entender. Es por eso que necesitas ayuda de los gráficos. En diseño web, Los cuadros son una de las mejores herramientas para la visualización de datos.. Es fácil de leer, fácil de usar y relativamente fácil de configurar.
Pero vamos a llevar las cosas a un nivel superior: vamos a Añade animación e interactividad a esos gráficos., para que los lectores no solo puedan aprender algo nuevo de la tabla, sino que también puedan jugar con él. En realidad, es más fácil de lo que parece, gracias a una serie de bibliotecas JS que existen. Vamos a verlos.
1. Gráfico JS
Chart.js es una biblioteca sin dependencia para crear gráficos en 6 tipos diferentes: gráficos de líneas, gráficos de barras, gráficos de radar, gráficos de áreas polares, gráficos circulares y de anillos. La biblioteca también está dividida según el tipo de gráfico para que sus páginas no se atasquen con lo que no es necesario. Es compatible con el diseño responsivo y puede cambiar fácilmente variables como el color o la animación para personalizar la interfaz del gráfico.
2. Cartista JS
Chartist JS Es una gran biblioteca para crear gráficos de respuesta que hacen uso de SVG. Además de su capacidad de respuesta, Chartist le brinda flexibilidad al usar una clara separación de preocupaciones: estilo con CSS y control con JS. Para facilitar la personalización, se incluyen los archivos SASS. Lo mejor aquí es que tienes opciones ilimitadas para animar tu gráfico usando la API de animación Chartist, SMIL, que te brinda opciones de animación adicionales.
3. C3 JS
C3 JS Es una biblioteca para construir gráficos basados en D3 JS. Envuelve el código requerido para crear gráficos con D3 JS, de modo que puede omitir la escritura del código D3 y simplemente ingresar sus datos. C3 viene con una variedad de API que puede utilizar para controlar sus gráficos fácilmente. Para personalizar su gráfico, defina sus propios estilos personalizados para las clases de CSS dadas. Construye gráficos desde simples gráficos de líneas para calibrar gráficos. Echa un vistazo a esta página para ver cómo funciona la biblioteca.
4. Flot
Flot jQuery plguin es una herramienta para crear gráficos con elementos interactivos, como activar o desactivar una serie, interacciones de puntos de datos, desplazamiento, zoom y más. Flot viene con una variedad de opciones de tipos de gráficos y si desea más capacidad en su gráfico, aquí hay algunos complementos que también puede usar. Los gráficos funcionarán bien con los navegadores que admiten lienzos HTML.
5. EChart
Echart es una biblioteca increíblemente completa de China que admite múltiples tipos de gráficos, puede procesar big data (trazar hasta 200,000 puntos de datos en un gráfico cartesiano), tiene itinerancia a escala, la capacidad de extraer, integrar e intercambiar datos sin esfuerzo entre múltiples gráficos, lo que permite uno para cambiar fácilmente de un tipo de datos a otro, y mucho más.
6. la piedad
Paridad agregará un mini gráfico a su página web. Es un pequeño plugin de jQuery que transforma un elemento en un mini svg Gráfico de líneas, barras, anillos o circulares. Solo necesitas crear un elemento y dar un valor como 1/5 y hacer una llamada Piedad ('pastel') en ese elemento para hacer un mini gráfico circular. Por ejemplo, para crear un gráfico de anillos que solo esté resaltado un quinto, aquí está el HTML:
1/5
Puede personalizar el color, el radio, el ancho y la altura del gráfico, pero por defecto se muestra en tamaño pequeño.
7. DC JS
DC JS tiene similitudes con C3 JS en términos de motor utilizado; ambos usan la biblioteca D3 para representar gráficos en SVG. DC JS se creó para ayudarlo a visualizar datos y análisis para navegadores y dispositivos móviles. Dado que aprovecha el D3 JS, le permite agregar la interacción del usuario a su gráfico. DC JS es una biblioteca poderosa para crear gráficos de complejidad simple a alta..
8. Google Chart
Puede crear gráficos interactivos y herramientas de datos utilizando la API de visualización de Google a través de Google Chart. Hay galerías de gráficos para ver las capacidades de visualización de datos de Google Chart. Para comenzar, incruste JavaScript simple en su página web para cargar las bibliotecas de Google Chart que necesita. Luego, enumere los datos que desea que se registren y realice algunas personalizaciones a través de las opciones de gráficos. Finalmente, cree un objeto gráfico con un ID y, en su página web, cree un NVD3 es un conjunto de gráficos reutilizables y componentes de gráficos que se construyen con D3 JS. Esta biblioteca es, por lo tanto, una "plantilla" que ayudará a facilitar la creación de gráficos. Echa un vistazo a las muchas tablas de muestra construidas con NVD3 aquí.
9. NVD3
Ahora lea: bibliotecas de JavaScript para crear mapas interactivos y personalizados
