Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Crea Gráficas Interactivas Usando Plotly.js, Parte 1: Comenzando

Read Time: 10 mins
This post is part of a series called Create Interactive Charts Using Plotly.js.
Create Interactive Charts Using Plotly.js, Part 2: Line Charts

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

En la serie titulada Comenzando Con Chart.js, aprendiste cómo usar Chart.js para crear fácilmente gráficas responsivas basadas en lienzo. Esta serie cubrió siete diferentes tipos básicos de gráfica ofrecidos por la librería. Sin embargo, podrías ser requerido para crear gráficas más complejas con funcionalidad adicional para hacer estas gráficas interactivas.

Una de las mejores librerías libres de uso para crear una variedad de gráficas responsivas, interactivas y ricas en funcionalidad es Plotly.js. En esta serie, aprenderás cómo crear diferentes tipos de gráficas usando Plotly.js, incluyendo gráficas de línea, gráficas de barra, gráficas de burbuja, y gráficas de punto.

¿Por Qué Usar Plotly.js?

Plotly.js ofrece muchas características que hacen que aprender la librería valga el esfuerzo. Es una librería de declarativa de alto nivel construida encima de d3.js y stack.gl. Aquí está una lista de características para hacer a Plotly una de las mejores librerías JavaScript de graficación:

  • Puedes crear gráficas interactivas con facilidad usando Plotly.js. Cualquier gráfica que crees con la librería es equipada con características como acercamiento, alejamiento, paneo, auto-escalado, etc. Estas características son muy útiles cuando quieres estudiar gráficas con un gran número de puntos graficados. Todos estos eventos son expuestos en la API, así que puedes escribir código personalizado para realizar tus propias acciones cuando cualquiera de estos eventos es disparado.
  • Un alto rendimiento cuando se trazan muchos puntos hacen a Plotly.js una gran elección siempre que tienes que graficar una gran cantidad de datos. Ya que la mayoría de gráficas son creadas usando SVG, obtienes una cantidad decente de compatibilidad a lo largo de navegadores y la habilidad de exportar imágenes de alta calidad de cualquier gráfica. Sin embargo, dibujar una gran número de elementos SVG en el DOM puede afectar de manera adversa el desempeño. La librería usa stack.gl para crear gráficas 2D y 3D de alto desempeño.
  • Cualquier gráfica 3D que creas son generadas con la ayuda de WebGL para sacar ventaja completa de todo el poder que GPU tiene que ofrecer.
  • Todas las gráficas Plotly.js son totalmente personalizables. Todo desde colores y etiquetas hasta cuadrículas y leyendas pueden ser personalizados usando un conjunto de atributos JSON. Aprenderás cómo personalizar diferentes tipos de gráfica en las siguientes tres partes de la serie.

Instalando Plotly

Antes de comenzar a usar Plotly.js, necesitamos instalarlo primero. Hay muchas maneras diferentes para instalar librería.

Puedes clonar directamente la librería usando el siguiente comando y después usar los archivos localizados en la carpeta dist.

Otra opción es realizar la instalación usando npm ejecutando el siguiente comando:

También puedes usar la CDN Plotly.js y enlazar directamente la librería. Generalmente, usarías un archivo compilado y minimizado con la última versión de la librería. Sin embargo, también puedes enlazar una versión específica de la librería en la CDN. Aquí hay un ejemplo:

Al momento de escribir este tutorial, la última versión de la librería es 1.28.3. El tamaño del archivo después de minimizar y comprimir la librería es 666 kB. La versión no-minimizada y descomprimida tiene un tamaño de 5.4 MB. Como puedes ver, la larga lista de características que esta librería ofrece viene con un costo.

Comenzando desde la versión 1.15, puedes elegir desde diferentes paquetes parciales, cada uno te permite crear tipos específicos de gráfica. Hay siete paquetes diferentes: básico, cartesiano, geo, gl3d, gl2d, mapbox, y finanzas. Puedes obtener el enlace CDN para estos paquetes usando la siguiente línea:

Si solo necesitas dibujar gráficas de un paquete sencillos, puedes usar este método para reducir significativamente el tamaño de archivo. Aquí está una información adicional sobre cada uno de ellos.

  • básico: Este paquete contiene los módulos de trazado scatter, bar y pie. La versión comprimida y minimizada de este paquete tiene un tamaño de 215.7 kB.
  • cartesiano: Este paquete contiene los módulos de trazado scatterbarboxheatmaphistogramhistogram2dhistogram2dcontourpiecontour y scatterternary. La versión minimizada comprimida de este paquete tiene un tamaño de 238.2 kB.
  • geo: Este paquete te permite crear diferentes tipos de gráficas relacionadas con mapas en JavaScript. La versión comprimida y minimizada de este paquete tiene un tamaño de 224.1 kB.
  • gl3d: Este paquete te permite crear diferentes tipos de mapas 3D usando los módulos de trazado scatterscatter3dsurfacemesh3d. La versión comprimida y minimizada para este paquete tiene un tamaño de 354 kB.
  • gl2d: Este paquete contiene los módulos de trazado scatterscatterglpointcloudheatmapglcontourgl y parcoords. Tiene un tamaño de 362.9 kB después de minimizado y comprimido.
  • mapbox: Este paquete contiene los módulos de trazado scatter y scattermapbox. El tamaño de archivo en este caso es 328.6 kB.
  • finanzas: El paquete de finanzas puede ser usado para crear series de tiempo, candeleros y otros tipos de gráficas para trazar datos financieros. Este módulo consiste de los módulos de trazado scatterbarhistogrampieohlc y candlestick.

Usando Plotly para Crear una Gráfica

Una vez que has decidido las gráficas que quieres crear y cargado el paquete apropiado en tu página web, puedes comenzar a crear tus propias gráficas usando Plotly.js. La primera cosa que necesitas hacer es crear un elemento div vacío en donde el gráfico debería ser dibujado.

Ten algunos datos listos que quieras trazar en la gráfica. En este ejemplo, solo estoy usando algunos números aleatorios para crear la gráfica. Finalmente, tienes que llamar a la función plot() y proporcionarle toda la información como el contenedor div, los datos, y las opciones de diseño. Aquí está el código para crear una gráfica de línea muy básica:

Todas las gráficas en Plotly.js son creadas de manera declarativa usando objetos JSON. Cada propiedad de la tabla, como su color y datos, tienen un atributo JSON correspondiente que puede ser usado para personalizar completamente la apariencia y comportamiento de la gráfica.

Los atributos pueden ser ampliamente divididos en dos categorías. La primera es llamada trazos, que son los objetos usados para proporcionar información sobre series sencillas de información para ser trazados en la gráfica. La segunda categoría es layout, que proporciona diferentes atributos que controlan todos los otros aspectos de la gráfica como su título o anotaciones. Los diferentes trazos están más categorizados por el tipo de gráfica, y los atributos que están disponibles para que dibujes la gráfica dependerán del valor del atributo type.

En el ejemplo de arriba, hemos creado un objeto traceA que almacena el tipo de trace y los datos que quieres trazar en la gráfica. El siguiente demo de CodePen muestra el resultado final del código de arriba.

Como puedes ver en el demo, puedes acercar, alejar o auto escalar el gráfico. También puedes descargar la gráfica como una imagen. La gráfica por si misma se ve muy profesional con sus líneas afiladas.

Atributos de Diseño para Personalizar las Gráficas

En el resto de los tutoriales en esta serie, nos enfocaremos en aprender sobre diferentes atributos relacionados a tipos específicos de tipos de gráfica como gráficas de línea y de barra. Antes de hacer eso, deberías también tener algún conocimiento básico de diferentes atributos de diseños que controlan aspectos comunes a todos los tipos de gráfica como fuente, el título, el eje x, el eje y, etc.

Puedes especificar una fuente global que debería ser usada mientras creas trazos y otros componentes de diseño como los ejes y el título. Las opciones son especificadas usando el objeto font, y estos valores son usados por defecto por todos los componentes de la gráfica. Las claves color, size y family están anidadas dentro de la clave font. Puedes usarlas para establecer el color global de fuente, tamaño global de fuente, y la familia tipográfica global respectivamente.

Cada gráfica tiene un atributo title el cuál puede ser usado para establece el título para la gráfica actual. Esta le da al usuario alguna información sobre lo que estás trazando en la gráfica. Las propiedades de fuente para el título pueden ser especificadas usando el atributo titlefont. Justo como el atributo global font, las claves color, size y family anidadas dentro del atributo titlefont pueden ser usadas para controlar las propiedades relacionadas con la fuente del título.

Puedes especificar el ancho y alto de una gráfica en pixeles usando las claves width y height. También puedes controlar el espaciado alrededor de la gráfica así como el área de trazado usando diferentes atributos anidados bajo la clave margin. Todos los valores están especificados en pixeles.

El margen izquierdo es especificado usando el atributo l, el margen derecho usando el atributo r, el margen superior usando el atributo t, y el margen inferior usando el atributo b. El área de trazado y las líneas de eje son muy cercanas entre sí por defecto. Puedes agregar algún espaciado alrededor del área de trazado usando el atributo pad anidado dentro de la clave margin. El padding es especificado en pixeles, y su valor por defecto es cero.

Puedes elegir tus propios colores para el fondo de toda la gráfica así como el área de trazado para emparejar el tema de tu sitio web. Ambos colorees están establecidos a blanco por defecto, pero puedes especificar un valor diferente para cada uno de ellos usando las claves paper_bgcolor y plot_bgcolor respectivamente.

También puedes especificar el título y diferentes propiedades de fuente para todos los ejes en tu table. Las propiedades de fuente están anidadas dentro de las claves de ejes para los ejes respectivos. También tienes la habilidad de controlar independientemente la base de color para el eje y el color de la fuente usada para su título.

Algunas veces, los puntos siendo trazados sobre una gráfica no irán hasta cero. En tales casos, las marcas creadas por Plotly sobre un eje tampoco se extenderán a cero. Sin embargo, si quieres que las marcas siempre comiencen desde cero, independientemente del rango de puntos siendo trazados, puedes usar el atributo rangemode y establecer su valor a tozero.

El siguiente pedazo de código usa algunos de los atributos que acabamos de discutir para modificar la apariencia de la gráfica que creamos en la sección anterior.

Conclusión

En este tutorial, aprendiste sobre las distintas características de la librería Plotly.js. También cubrí la instalación y uso de la librería junto con diferentes atributos para personalizar la apariencia de las gráficas de acuerdo a tus necesidades.

JavaScript se ha vuelto uno de los lenguajes de facto para trabajar en la web. No es sin sus curvas de aprendizaje, y hay muchos marcos de trabajo y librerías para mantenerte ocupado también. Si estás buscando recursos adicionales para estudiar o usar en tu trabajo, revisa lo que tenemos disponible en Envato marketplace.

En el resto de la serie, aprenderás sobre distintos tipos de gráficas básicas que pueden ser creadas usando Plotly. Espero que hayas disfrutado el tutorial, y si tienes cualquier pregunta o sugerencia, siéntete libre de compartirlas en los comentarios.

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.