Support Centre

Búsqueda

Agregue un gráfico de estadísticas (estadísticas) a su diseño accesible

Renée Meloche
Renée Meloche
  • Actualización

Un  gráfico de estadísticas  es una excelente manera de mostrar  un punto de datos simple como un porcentaje o un valor numérico al combinar ese número y una representación visual como una serie de íconos o gráficos simples como una rosquilla, una media rosquilla o una barra de progreso. 

Una vista parcial de un lienzo en blanco en el Editor de Venngage actualizado. En la barra lateral izquierda, la herramienta Gráficos se expande en un panel que se encuentra parcialmente en el marco desde la izquierda, mostrando una galería de gráficos que un usuario puede agregar al lienzo de diseño. Bajo el encabezado Estadísticas, hay cuatro opciones de gráfico: Estadísticas de donas, Estadísticas de media dona, Estadísticas de barra de progreso y Estadísticas de iconos. Un usuario hace clic en cada uno de estos gráficos en la barra lateral izquierda, uno a la vez, agregándolos al lienzo de diseño y redimensionándolos para que se organicen en una cuadrícula suelta.

 

¡Venngage hace que sea fácil agregar  gráficos de estadísticas accesibles  a tu diseño!

Agregar un gráfico de estadísticas al lienzo de diseño

Cree una plantilla accesible  en el Editor actualizado.

Seleccione o haga clic en  Gráficos   en la barra lateral izquierda. Bajo el encabezado "  Estadísticas  ", elija un tipo de gráfico:   dona  ,   media dona  ,   barra de progreso   o  estadística  de iconos   . Haga clic en el gráfico para agregarlo al lienzo.

En el Editor de Venngage actualizado, aparece una diapositiva de presentación en el área del lienzo de diseño. La diapositiva tiene algunos elementos como un borde decorativo en la parte inferior y un pequeño párrafo de texto a la izquierda con el título 'Ejemplo 3'. Un usuario hace clic en "Gráficos" en la barra lateral izquierda del Editor, expande el panel de la galería y empuja el lienzo de diseño más hacia la izquierda. Bajo el encabezado Gráficos de estadísticas en el panel, se pueden ver varias opciones de gráficos; el usuario hace clic en Icon Stat y agrega un gráfico de Icon Stat al lienzo. Aparece, por defecto, como un gráfico con el porcentaje 67% en el lado izquierdo y una fila de 10 iconos en dos colores contrastantes: un azul oscuro que representa el 67% y un azul claro que representa el 53% restante.

Personalizar la apariencia del gráfico

Los gráficos de estadísticas de íconos se pueden personalizar para adaptarse a su marca o tema de diseño, con herramientas de color, fuente, espaciado e íconos. 

Utilice la herramienta de selección para cambiar el tamaño y la posición del gráfico de estadísticas en su lienzo, con los controles del cuadro delimitador. 

En el Editor de Venngage actualizado, una diapositiva de presentación es parcialmente visible en el área del lienzo de diseño. La diapositiva tiene un gráfico de estadísticas de icono azul y algunos otros elementos como un borde decorativo en la parte inferior y un pequeño párrafo de texto a la izquierda. El gráfico de estadísticas de íconos muestra el porcentaje del 67 % en el lado izquierdo y una fila de 10 íconos (siluetas simples de una cabeza y hombros) en dos colores contrastantes: un azul oscuro que representa el 67 % y un azul claro que representa los 53 restantes. % Un usuario hace clic en el gráfico de estadísticas para cambiar su posición en el lienzo, a la derecha del párrafo de texto, y luego usa el cuadro delimitador para cambiar su tamaño. Usando el nodo central en el lado derecho del cuadro, el usuario estrecha el gráfico; esto da como resultado que los íconos se reorganicen, de una sola fila de 10 a dos filas.

Valor

Cambie el   valor   del gráfico de estadísticas y cómo se muestran el gráfico o los iconos. Seleccione el  valor numérico  (el porcentaje) en el gráfico de estadísticas. Escriba el porcentaje deseado en el campo "  Valor  " en la barra de herramientas superior.

Articulos totales

Cambie la  cantidad de íconos  que aparecen en un  gráfico  de estadísticas de íconos  para representar el valor. Por ejemplo, puede mostrar el valor "75%" con 4 íconos en total o 50, cambiando la escala del gráfico.

Una vista parcial de una caña en el Editor de Venngage actualizado muestra un diseño con un fondo blanco y un gráfico de estadísticas de íconos en el lienzo. El gráfico muestra el número 75% y 100 íconos de manzanas, en 8 filas de 13 (la última fila con 9 íconos). De esos, 75 de los íconos de manzana son rojos; 25 de los iconos son verdes. Con el gráfico seleccionado, un usuario hace clic en el campo de texto Valor del gráfico en la barra de herramientas superior, donde aparece el valor 75%. El usuario escribe 50% en el campo de texto y luego hace clic en el campo de texto Elementos totales al lado en la barra de herramientas superior. Aparece un menú desplegable con selecciones de números, pero el usuario escribe en el campo de texto y cambia el número 100 a 2. En el lienzo de diseño, el gráfico de estadísticas de íconos ahora muestra el número 50% y dos íconos de manzana, uno de los cuales es rojo, el otro verde. El usuario vuelve a hacer clic en el campo Valor del gráfico y lo vuelve a cambiar al 75 %, que aparece junto al gráfico en el lienzo y hace que los iconos de Apple cambien de nuevo; uno es rojo, y el segundo ahora es mitad rojo, mitad verde. El usuario cambia el número Total de artículos a 4; Ahora aparecen cuatro íconos de manzana en el gráfico, los primeros 3 de los cuales son rojos y el cuarto es verde. El usuario vuelve a hacer clic en Valor del gráfico y cambia el número a 89 %; este nuevo número aparece junto al gráfico en el lienzo. El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes). que aparece junto al gráfico en el lienzo y hace que los íconos de Apple cambien nuevamente; uno es rojo, y el segundo ahora es mitad rojo, mitad verde. El usuario cambia el número Total de artículos a 4; Ahora aparecen cuatro íconos de manzana en el gráfico, los primeros 3 de los cuales son rojos y el cuarto es verde. El usuario vuelve a hacer clic en Valor del gráfico y cambia el número a 89 %; este nuevo número aparece junto al gráfico en el lienzo. El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes). que aparece junto al gráfico en el lienzo y hace que los íconos de Apple cambien nuevamente; uno es rojo, y el segundo ahora es mitad rojo, mitad verde. El usuario cambia el número Total de artículos a 4; Ahora aparecen cuatro íconos de manzana en el gráfico, los primeros 3 de los cuales son rojos y el cuarto es verde. El usuario vuelve a hacer clic en Valor del gráfico y cambia el número a 89 %; este nuevo número aparece junto al gráfico en el lienzo. El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes). El usuario cambia el número Total de artículos a 4; Ahora aparecen cuatro íconos de manzana en el gráfico, los primeros 3 de los cuales son rojos y el cuarto es verde. El usuario vuelve a hacer clic en Valor del gráfico y cambia el número a 89 %; este nuevo número aparece junto al gráfico en el lienzo. El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes). El usuario cambia el número Total de artículos a 4; Ahora aparecen cuatro íconos de manzana en el gráfico, los primeros 3 de los cuales son rojos y el cuarto es verde. El usuario vuelve a hacer clic en Valor del gráfico y cambia el número a 89 %; este nuevo número aparece junto al gráfico en el lienzo. El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes). El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes). El usuario hace clic en Total de artículos y elige el número '50' del menú desplegable que aparece cuando hace clic en el campo de texto; los íconos de manzana en el gráfico en el lienzo cambian nuevamente, esta vez apareciendo en cuatro filas de 13 (la última fila con 11 íconos, los últimos 6 y medio de los cuales son verdes).

Espaciado, redondeo de esquinas, altura de barra, orificio de dona

Diferentes gráficos tienen diferentes opciones de personalización. 

Cambie la disposición de las  filas y columnas  en un gráfico de estadísticas de iconos simplemente cambiando su tamaño. La cantidad de íconos que aparecen en una fila o columna dependerá del tamaño del gráfico, así como del tamaño de los íconos, sin cambiar su Valor o Total de Elementos  . Una vista parcial de un lienzo de diseño blanco en el editor de Venngage actualizado, con un gráfico de estadísticas de íconos en la parte superior. El gráfico de estadísticas muestra el porcentaje 34% y una sola fila de 10 íconos de manzana; las tres primeras manzanas son rojas; la cuarta manzana es parcialmente roja y 3/4 verde, y los íconos restantes son verdes. Un usuario cambia el valor del gráfico a 76 % y el total de elementos a 50 en la barra de herramientas superior; los cambios en el gráfico son visibles en el lienzo. El gráfico ahora aparece con 4 filas de íconos de manzanas; las tres filas superiores tienen 13 íconos de ancho y la fila inferior tiene 11. Los íconos de manzana son rojos, hasta el último ícono de manzana en la cuarta fila, que es completamente verde; y los 11 íconos de manzana en la última fila son verdes. El usuario hace clic en el gráfico para seleccionarlo y usa el cuadro delimitador para cambiar el tamaño del gráfico, resultando en la disposición de las filas y columnas del gráfico para cambiar. Cuando el usuario termina, el gráfico tiene 7 filas, con 8 íconos en cada una, salvo la última fila que tiene 2. Las manzanas verdes comienzan en la quinta fila, con las dos últimas manzanas ahora verdes y las dos últimas filas hechas. de manzanas enteramente verdes.

 

Seleccione un  gráfico de barras de progreso  y use el control deslizante para calibrar el  espacio vertical  entre la barra y el texto del número.

Una vista parcial de un lienzo de diseño en el editor de Venngage actualizado, donde se ven varios gráficos de estadísticas en la esquina superior izquierda de la página. Un usuario selecciona el gráfico de barras de progreso en la parte inferior de la página de diseño y luego selecciona la herramienta Espaciado vertical que está disponible en la barra de herramientas superior. Con el control deslizante que se abre en un widget cuando el usuario hace clic en la herramienta, el usuario cambia el espacio entre el texto que aparece sobre el gráfico de barras (en este caso, 38 %) y el propio gráfico de barras. Luego, el usuario cierra la herramienta y expande el gráfico, redimensionándolo para que el espacio sea más visible.

Cambie el   redondeo de las esquinas   a recto o redondeado con el control deslizante en los gráficos de barras  de  progreso  ,  de media dona   y  de dona . 

Una vista parcial de un lienzo de diseño en el editor de Venngage actualizado, donde se ven varios gráficos de estadísticas en la esquina superior izquierda de la página. Un usuario selecciona el gráfico de barras de progreso en la parte inferior de la página de diseño y luego selecciona la herramienta Redondeo de esquinas en la barra de herramientas superior. Usando el control deslizante que se abre en un widget cuando el usuario hace clic en la herramienta, el usuario cambia el redondeo en la parte más oscura de la barra de progreso, haciendo que las esquinas sean más o menos redondeadas.

El tamaño del orificio de dona   determina el ancho del  gráfico  de dona   o   media dona   tal como aparece en el gráfico de estadísticas. Use el control deslizante para aumentar o disminuir el ancho.

Una vista parcial de un lienzo de diseño en el editor de Venngage actualizado, donde se ven varios gráficos de estadísticas en la esquina superior izquierda de la página. Un usuario selecciona el gráfico de media dona en la parte superior derecha de la página de diseño y luego selecciona la herramienta Donut Hole en la barra de herramientas superior. Usando el control deslizante que se abre en un widget cuando el usuario hace clic en la herramienta, el usuario cambia el ancho del gráfico de media dona, haciéndolo más pequeño o más grande; al mismo tiempo, el valor porcentual se muestra en texto más grande o más pequeño para compensar el tamaño del gráfico.

Use la herramienta "  Altura de la barra  " para aumentar o disminuir el ancho de la barra en  los gráficos de barras de progreso  de la misma manera.

Un primer plano de la barra de herramientas superior en el Editor actualizado, donde la herramienta Altura de la barra está seleccionada y el widget está abierto, mostrando un control deslizante igual al que aparece en el widget de la herramienta Donut Hole para gráficos de estadísticas de Donut y Half-Donut .

Cambiar tipo de gráfico

Cambie fácilmente el tipo de gráfico desde la barra de herramientas superior. 

Seleccione el gráfico. Haga clic o seleccione el  menú  Tipo de gráfico   en la barra de herramientas superior; seleccione un tipo de gráfico diferente en el menú desplegable. El tipo de gráfico se actualizará en el lienzo de diseño. 

Una vista parcial de un lienzo en blanco en el editor de Venngage actualizado muestra un diseño con un fondo blanco y tres gráficos de estadísticas agrupados en el lado izquierdo de la página. Un usuario selecciona el gráfico inferior, un gráfico de barras de progreso que aparece en los colores predeterminados azul oscuro y azul claro, con el número 38 %. En la barra de herramientas superior, aparece un menú desplegable para Tipo de gráfico y el usuario hace clic en él y selecciona Gráfico de iconos. En el lienzo, el gráfico de barras de progreso cambia a un gráfico de iconos, con una sola fila de iconos de silueta simple (cabeza y hombros) y el mismo porcentaje. El usuario vuelve a hacer clic en el menú desplegable Tipo de gráfico en el menú superior y selecciona Gráfico de media dona, cambiando el gráfico en el lienzo de diseño a media dona y el mismo 38 %. El usuario vuelve a hacer clic en el gráfico del menú superior y vuelve a cambiar el gráfico a una barra de progreso.

Edite el color, el texto o el icono del gráfico

Color

Cambie el color de los íconos o el texto que aparece en el gráfico de estadísticas haciendo clic (o Tabulador-Barra espaciadora para seleccionar) esa parte del gráfico.

Los   colores de relleno   son los colores del gráfico o los iconos del gráfico.  El color de relleno 1   siempre representa el  porcentaje de valor del gráfico  . 

Haga clic en   Color de relleno   o   Color de fuente   para abrir el widget Herramienta de color. Seleccione entre los colores del kit de marca o del proyecto haciendo clic en los círculos de muestra de color debajo, o use el selector de color en la parte inferior del widget para seleccionar un color personalizado. 

La parte inferior del widget indicará si sus opciones de color cumplen con  los estándares de contraste  . 

En el Editor de Venngage actualizado, una diapositiva de presentación es parcialmente visible en el área del lienzo de diseño. La diapositiva tiene un gráfico de estadísticas de icono azul y algunos otros elementos como un borde decorativo en la parte inferior y un pequeño párrafo de texto a la izquierda. El gráfico de estadísticas de íconos muestra el porcentaje 63% y dos filas de íconos (siluetas simples de una cabeza y hombros). La fila superior tiene 6 íconos y la fila inferior tiene 4; los iconos aparecen en dos colores contrastantes: un azul oscuro que representa el 63 % y un azul claro que representa el 57 % restante. En la fila inferior, el primer icono es parcialmente azul oscuro. Se selecciona el gráfico y aparecen herramientas en la barra de herramientas superior sobre el lienzo, incluida una herramienta Color de fuente. El usuario hace clic en Color de fuente en la barra de herramientas superior y elige un color verde azulado oscuro de los mosaicos que aparecen bajo el encabezado Colores del proyecto. Luego, el usuario hace clic en los íconos del gráfico en el lienzo y aparece un conjunto diferente de herramientas en la barra de herramientas superior. El usuario hace clic en el primer mosaico de color, Color de relleno 1, que aparece con el mismo azul oscuro que los iconos del gráfico. Desde los mosaicos de Color del proyecto en el widget de herramienta de color que se abre, el usuario selecciona un verde azulado medio, luego cierra la herramienta Color de relleno 1 haciendo clic en el mosaico Color de relleno 2 junto a él en la barra de herramientas superior. El usuario selecciona un color rojo brillante de los mosaicos en Project Colors que aparecen en el widget Color Tool. El usuario cierra la herramienta de color y hace clic en Desde los mosaicos de Color del proyecto en el widget de herramienta de color que se abre, el usuario selecciona un verde azulado medio, luego cierra la herramienta Color de relleno 1 haciendo clic en el mosaico Color de relleno 2 junto a él en la barra de herramientas superior. El usuario selecciona un color rojo brillante de los mosaicos en Project Colors que aparecen en el widget Color Tool. El usuario cierra la herramienta de color y hace clic en Desde los mosaicos de Color del proyecto en el widget de herramienta de color que se abre, el usuario selecciona un verde azulado medio, luego cierra la herramienta Color de relleno 1 haciendo clic en el mosaico Color de relleno 2 junto a él en la barra de herramientas superior. El usuario selecciona un color rojo brillante de los mosaicos en Project Colors que aparecen en el widget Color Tool. El usuario cierra la herramienta de color y hace clic en

Fuente

Haga clic en el porcentaje de Valor del gráfico (o use Tabulador-Barra espaciadora para seleccionar) tal como aparece, según el tipo de gráfico. 

Use la barra de herramientas superior para personalizar la apariencia del texto:

  • Haga clic o seleccione  Color de fuente   para abrir el widget de herramienta de color y cambiar el color del texto, independientemente del resto del gráfico.
  • Haga clic o seleccione  Familia de fuentes  para abrir el menú desplegable y seleccione una fuente diferente
  • Use los  botones  +  y  -  o escriba el tamaño de la fuente en el campo  Tamaño del texto  para cambiarlo (  NOTA  : En este momento, el tamaño del texto solo se puede personalizar en los gráficos de estadísticas  de progreso  e íconos ; el tamaño del texto en los gráficos de dona y media dona cambiará proporcionalmente cuando cambia el tamaño del gráfico utilizando el cuadro delimitador).
  • Dale estilo a la fuente con   Negrita  ,  Cursiva  y  Subrayado  

En una vista parcial de un lienzo de diseño blanco en el editor de Venngage actualizado, se ven tres gráficos de estadísticas. El gráfico inferior muestra el 38 % en texto grande sobre un gráfico de barras, en azul claro y oscuro predeterminado. Un usuario hace clic en la parte del '38 %' del gráfico de progreso. En la barra de herramientas superior aparece un conjunto de herramientas para personalizar el texto. El usuario hace clic en el icono Color de fuente en la barra de herramientas superior y cambia el color del texto a un verde brillante. Luego, el usuario hace clic en el menú desplegable Familia de fuentes y selecciona el tipo de fuente Cabin, lo que cambia la apariencia del porcentaje. Con el botón menos a la izquierda del tamaño del texto, el usuario cambia el tamaño del texto de 91 a 88 px. Luego, el usuario hace clic en Negrita, Cursiva y Subrayado para aplicar estilo al texto.

Iconos

Cambie el ícono en un   gráfico de estadísticas de íconos  intercambiándolo con cualquier ícono de un solo color en nuestra galería. 

Haga doble clic en los íconos en el Gráfico de estadísticas de íconos en el lienzo de diseño, o seleccione el Gráfico de estadísticas de íconos y haga clic en "  Reemplazar  " en la barra de herramientas superior para abrir el panel  Reemplazo de íconos  desde la barra lateral izquierda.

Haga clic en un paquete de íconos para buscar miniaturas de íconos o ingrese un término de búsqueda específico en la barra de búsqueda superior. Seleccione un icono de la galería y cambiará en el gráfico del lienzo. 

En el Editor de Venngage actualizado, aparece una diapositiva de presentación en el área del lienzo de diseño. La diapositiva tiene algunos elementos como un borde decorativo en la parte inferior y un pequeño párrafo de texto a la izquierda con el título 'Ejemplo 3'. A la derecha de la diapositiva hay un gráfico de estadísticas de íconos, con 7 filas de seis íconos (siluetas simples de personas que muestran solo cabezas y hombros). Las primeras cinco filas de íconos son verde azulado mediano, con la sexta fila mostrando el primer ícono en verde azulado mediano, luego el segundo ícono mitad verde azulado, mitad rojo brillante y el resto de los íconos en rojo brillante. Un usuario hace clic en el gráfico de iconos para seleccionarlo, luego hace clic en Reemplazar en la barra de herramientas superior, abriendo el panel Reemplazar icono desde la barra lateral izquierda. Se muestra un paquete de íconos de un solo color en miniaturas en el panel; el usuario escribe 'examen' en la barra de búsqueda en la parte superior del panel y devuelve resultados que incluyen íconos de trabajos, marcas de verificación, gorras de diploma, etc. El usuario selecciona de los íconos en la galería; cuando el usuario hace clic en un ícono de la galería en el panel Reemplazar ícono, reemplaza los íconos en el gráfico de estadísticas en el lienzo de diseño.

Agregue texto alternativo a su gráfico 

Describa los gráficos de estadísticas que aparecen en su lienzo de diseño para  usuarios con discapacidades visuales o lectores con otras necesidades de accesibilidad  .

Seleccione el gráfico  . Haga clic en "  Texto alternativo  " en la barra de herramientas superior; añada su texto descriptivo. Una descripción simple, para que el usuario sepa cómo aparece el gráfico y la estadística que representa, es perfecta. Aquí hay unos ejemplos: 

  • Un gráfico de íconos de estadísticas, con el valor '63%' y una cuadrícula de 9 filas y 6 columnas de íconos que representan gorras de diploma. Comenzando en la parte superior izquierda y continuando de izquierda a derecha y hacia abajo, el 63 % de los íconos son verdes. El 37% restante de los íconos, que continúan desde la mitad hasta la cuarta última fila, son rojos. 
  • Un gráfico de estadísticas de media dona con el valor 55%. La primera parte de la media dona es de color púrpura oscuro, representando el 55%; el resto de la rosquilla es de color púrpura claro. 
  • Un gráfico de barras de progreso estadístico con el valor 90%, donde el porcentaje está escrito en letras grandes de color marrón oscuro. Debajo, el gráfico de barras es principalmente rojo; el extremo izquierdo de la barra es de color rosa pálido. 

¿Fue útil este artículo?

Usuarios a los que les pareció útil: 0 de 0

¿Tiene más preguntas? Enviar una solicitud