Advertisement
  1. Web Design
  2. jQuery

Cómo usar jQuery con ZingChart

Scroll to top
Read Time: 4 mins
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Spanish (Español) translation by Steven (you can also view the original English article)

Los gráficos web creados con JavaScript son una excelente manera de agregar interactividad a tus aplicaciones y sitios, pero si prefieres trabajar en jQuery, tus opciones pueden ser limitadas. Los desarrolladores suelen elegir entre conveniencia o características. ¿Todas las campanas y silbatos en 100 líneas de código o una versión más simple en 30? Para abordar esto, el equipo de ZingChart ha desarrollado un contenedor para usar su API con la sintaxis jQuery, lo que permite a los desarrolladores crear rápidamente gráficos enriquecidos con la interactividad que desean.

Casos de uso común

Hay una llamada jQuery para cada función en la API de ZingChart, las 169 de ellas. En este tutorial cubriremos un puñado de ellas en tres de los casos de uso más comunes:

  1. Manipulación del DOM
  2. Manipulación de gráficos
  3. Uso de datos AJAX

Puedes ver la referencia completa en la página de ZingChart jQuery en Github.

Scripts y archivos

Si no tienes una copia de la biblioteca ZingChart o del contenedor jQuery, hay algunas opciones:

Configuración

Configura tu archivo HTML incluyendo la biblioteca ZingChart y los módulos adicionales que necesites. También deberás incluir jQuery y, finalmente, el contenedor ZingChart jQuery. El contenedor es compatible con jQuery versiones 1.x y 2.x.

Inicializar gráficos ahora es sencillo con la llamada a .zingchart(). Este método (y todos los demás que toman un objeto como parámetro) pueden tomar datos de gráficos directamente o por referencia (en este caso, donde los datos se almacenan en una variable llamada data1).

Inicializar por referencia

Inicializar con información

1. Manipulación del DOM

La primera demostración es un ejemplo de la manipulación del DOM utilizando uno de los agentes de escucha del contenedor, .nodeHover(). Al pasar el cursor sobre un nodo, se actualiza la tabla debajo de ella, especialmente útil en situaciones en las que debes proporcionar información adicional sobre los datos del gráfico fuera del propio gráfico. Hay oyentes para todos los objetos de gráficos, así como ciertos eventos, como .feedStart(), .historyBack() y muchos más.

Echa un vistazo a la demo para ver lo que eso nos da.

2. Manipulación de gráficos

El segundo gráfico muestra la manipulación del gráfico inverso a través del DOM. La entrada del control deslizante se convierte en un int y se pasa a una llamada .setNodeValue() para el nodo correspondiente.

Echa un vistazo a la demostración en Codepen para ver qué nos ofrece.

3. Carga de datos AJAX

Cargar datos nuevos es muy fácil. Tras una solicitud .get exitosa, pasa tus resultados con uno de los muchos métodos de establecimiento como .appendSeriesData(), .setSeriesValues(), .modify(), .setData(), etc. En el siguiente ejemplo, usamos .setSeriesValues() para pasar una nueva matriz de valores devueltos por nuestra llamada AJAX.

Nuevamente, echa un vistazo a la demostración en Codepen para ver lo que tenemos ahora.

Encadenamiento

El encadenamiento de métodos es una de las características más populares de jQuery. Este contenedor admite el encadenamiento para cualquier método o evento que devuelva un objeto jQuery. En lugar de llamar a las funciones de manipulación de gráficos por separado, ahora puedes encadenar tus llamadas en una línea:

El archivo de demostración completo está disponible para descargar.

Conclusión

Esa fue una ejecución muy rápida, demostrando cómo usar jQuery para ZingChart. ¡Con estos conceptos básicos deberías poder llevar tus propios gráficos mucho más lejos! Muéstranos tus ejemplos y no dudes en pedir sugerencias en los comentarios.

Recursos

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.