Por Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.

Tutorial de Esta Semana

JetElements: Gráfico de Barras

JetElements: Gráfico de Barras

Este tutorial explica cómo puede usar el widget Gráfico de barras de JetElements y personalizarlo según tus requisitos.

Presente resultados estadísticos de encuestas en su sitio web utilizando barras horizontales o verticales con diferentes alturas o longitudes, que corresponden a los valores. Muestre y compare la frecuencia, cantidad o medida agrupadas en categorías de forma gráfica utilizando el widget Gráfico de barras del complemento JetElements .

Personalización del widget Gráfico de barras

1 paso : habilitar el widget en el panel de WP

En primer lugar, habilite el widget Gráfico de barras en el bloque Elementor> Configuración de JetElements> Widgets disponibles en el Panel de control de WP.

habilitación del widget de gráfico de barras

Paso 2 : arrastre y suelte el widget en Elementor

Abra la página en el editor Elementor , busque el widget Gráfico de barras en el panel con widgets y suéltelo en un lugar determinado.

widget de gráfico de barras en Elementor

Paso 3 : descripción general de la pestaña Contenido

Puede ver el bloque de configuración del widget a la izquierda. En la pestaña Contenido hay dos secciones, Datos del gráfico y Configuración . Puede seleccionar un tipo de barra ( horizontal o vertical ), escribir etiquetas y agregar un número apropiado de elementos incluidos en el gráfico.

configuración de datos de gráficos

Es posible personalizar cada elemento como desee. Haga clic en el elemento y aparecerá la ventana con los ajustes disponibles. Debe especificar la etiqueta e ingresar los datos incluidos en la pestaña Contenido .

¡NOTA!
Puede extraer datos dinámicos de los metacampos creados con el complemento JetEngine haciendo clic en la opción Dinámica a la derecha sobre los campos Etiqueta y Datos .

configuración del elemento

Cambie a la pestaña Estilo y color de diseño para el fondo y los bordes aquí.

ajustes de estilo del artículo

Paso 5 : descripción general de la sección Configuración

Existe la sección Configuración a continuación. Aquí puede determinar la altura del gráfico, active la opción Líneas de cuadrícula para mostrar una cuadrícula en el fondo del gráfico. Además, puede activar la visualización de las etiquetas y la información sobre herramientas.
Además, en la subsección Leyenda , es posible establecer las opciones para la leyenda, como Visualización y Posición . Habilite la opción Revers para mostrar conjuntos de datos en orden inverso en la leyenda.

bloque de configuración

Paso 6 : diseñar el widget

Si hace clic en la pestaña Estilo en la parte superior, verá una gran cantidad de configuraciones de estilo para el gráfico, las etiquetas, la leyenda y la información sobre herramientas. Puede definir la configuración de la fuente, el ancho del borde y elegir colores.

configuración de estilo del widget Gráfico de barras

Paso 7 : ver el resultado en la interfaz

Cuando termine de configurar el widget, haga clic en el botón Actualizar y vea el gráfico en la interfaz.

gráfico de barras en la interfaz

Espero, este tutorial fue informativo para ti. Agrupe los datos y demuéstrelos en forma de gráfico con barras utilizando el widget Gráfico de barras de JetElements .

Compartenos en tus redes sociales

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Share on print

Deja un comentario

Esta Página usa Cookies para la mejor experiencia al navegar

Esta Página usa Cookies para mejorar tu experiemcia al navegar.