Construye gráficas dinámicas rápidamente en D3 con Plottable.js
El libre Biblioteca d3.js es solo uno de los muchos que te permiten crear gráficos interactivos en la pagina. Si bien D3 es quizás el más popular del grupo, aprender a usarlo no es una tarea fácil.
Es por eso Plottable.js Es una biblioteca tan valiosa. Es un proyecto gratuito de código abierto. construido encima de D3.js, Haciendo que sea más fácil para cualquiera crear gráficos de datos interactivos desde cero.
Esta biblioteca se encarga de todo el trabajo sucio, para que pueda centrarse en los detalles, como los datos. Trazable genera el código apropiado para el tamaño y la posición de cualquier carta que elija.
Cada cuadro tiene su propio componente en Plottable donde puedas copiar / pegar el código de la plantilla para reconstruir la carta por su cuenta. A partir de este escrito, puede seleccionar de 10 estilos de gráficos de parcelas, incluyendo gráficos de barras, gráficos circulares, diagramas de dispersión y gráficos de área.
Usted puede reconstruir componentes individualmente y personalizar sus configuraciones dinámicamente. De esta manera, puede cambiar fácilmente los elementos interactivos, colores, animaciones, posicionamientos, tamaños y cualquier otra cosa que necesite..
los biblioteca completa está disponible en GitHub si desea explorar el código fuente y descargar una copia.
Pero, la mejor manera de aprender es a través del ejemplo. Es por eso que deberías echar un vistazo a sus Gráficos de muestra ejecutando Plottable Para ver cómo funciona en acción..
Cada grafica es completamente interactivo, con código fuente para arrancar. Si desea reconstruir un gráfico similar, simplemente copie / pegue el código JS y vuelva a formatear según sea necesario.
Tengo dos favoritos personales de su sitio: el Calendario Heatmap modelado a partir del tablero de actividades de GitHub y el Cartas sincronizadas con funciones de selección dinámica.
Si nunca ha usado D3.js antes, tendrá dificultades para aprender esta biblioteca. Especialmente porque es escrito en TypeScript, así que probablemente querrás recoger eso también. El código final es compilado en ES5 JavaScript, por lo que debería trabajar en todos los principales navegadores.
Si estás dispuesto a bucear, echa un vistazo a sus Página de tutoriales Lleno de recursos útiles. Aprenderás todo lo que necesitas para comenzar con Plottable y para crear gráficos dinámicos basados en la web desde cero.
