Puedes añadir un fondo a determinados elementos que compondrán tus Gráficas tales como Regions, Overlays, Containers y Rectangles.
Para añadir un fondo a cualquiera de estos elementos deberás:
- Seleccionar el elemento del árbol o lienzo
- Buscar la sección Background en el Inspector del lado derecho del Editor.
- Seleccionar el tipo de fondo que deseas utilizar.
Los elementos del fondo pueden ser un color sólido, un gradiente o una imagen.
Sólido
Para añadir un color sólido, elígelo en el selector, utiliza su código hexadecimal o sus valores RGBA. También puedes configurar la opacidad para darle transparencia al color de fondo.
Utilízalo, por ejemplo, para generar una pantalla verde para integraciones de clave cromática.
Vincular Colores
Los colores sólidos también pueden provenir de datos dinámicos (API / JSON / XML / G-Sheet) y podrán ser vinculados a elementos que sean hijos de algún proveedor de datos. Para vincular un color con un elemento se debe seleccionar este elemento y en el inspector, en el menú de BACKGROUND se mostrará un submenú de vinculación de datos junto al selector de color, se despliega el submenú de vinculación y se selecciona el color que se quiera aplicar al elemento.
Los colores pueden ser opacos o tener un canal alfa (transparencia) y se pueden definir de cualquiera de las siguientes formas:
- Usar una palabra clave, como "azul" o "rojo", que sea parte de la lista aceptada de colores CSS (Cascading Style Sheets).
- Usando el sistema de coordenadas cúbicas RGB, a través de las notaciones funcionales # -hexadecimal o rgb() y rgba().
- Usando el sistema de coordenadas cilíndricas HSL, a través de las notaciones funcionales hsl() y hsla().
Para obtener más información sobre la sintaxis de colores en CSS, consulta este artículo de MDN. Hay otras sintaxis posibles, como lch(), lab() o color(), pero no recomendamos usarlas ya que no son compatibles con todos los navegadores.
Al igual que con cualquier otro string en JSON, los colores en los datos se pueden organizar como:
- Un solo valor, en forma de un string con un nombre
- Un objeto con grupos de colores (por ejemplo, para definir "swatches")
- Un arreglo de colores
La vinculación de colores también funciona con los Google Sheet Providers, al vincular una celda a un color sólido que vamos a usar de background. El color en el Google Sheet admite las siguientes notaciones:
Gradiente
Luego de seleccionar la opción Gradiente en el Inspector, utiliza los íconos de lápices en la parte superior del selector para elegir los colores de tu gradiente.
Haz clic con el lápiz para elegir el primer color y luego haz clic en el lápiz de la derecha para elegir el segundo color.
También puedes desplazar (horizontalmente) cada lápiz para agrandar o achicar el área que abarcará cada color.
Por defecto, los fondos con gradiente abarcan desde la parte superior a la parte inferior de un elemento, haciendo una transición desde el valor del primer color hasta el del segundo. Esta dirección, sin embargo, se puede modificar indicando un valor de grado.
Image
Puede establecer una imagen como fondo de tus gráficas de pantalla completa o, por ejemplo, si ya has creado tus tercios inferiores como imágenes, podrás subirlas.
Formatos soportados
- PNG
- SVG
- Animated GIF
- JPG
- WEBP
Tamaño máximo
El tamaño máximo que puedes subir es de 5 MB
Propiedades de las imágenes de fondo
Size
Ajustar
Se modificará la escala de la imagen de fondo hasta que quede contenida dentro del ancho o alto del Elemento, manteniendo sus proporciones originales y sin recortarla.
Podrían aparecer bandas transparentes si las proporciones de la imagen y las del Elemento difieren. Aquellas áreas podrían rellenarse utilizando las opciones de repetición.
Rellenar
Se modificará la escala del fondo hasta que cubra toda el área del Elemento, manteniendo sus proporciones originales, pero recortándolo si es necesario. Puedes utilizar los controles de posición para mover esa ventana de recorte.
Estirar
La imagen se estirará hasta cubrir toda el área del Elemento, perdiendo sus proporciones originales. Esto se notará especialmente cuando existan diferencias importantes entre las relaciones de aspecto del Elemento y de la imagen.
No es posible ajustar la posición ni la repetición en este modo.
Tamaño natural
La imagen se mostrará con su ancho y alto en pixeles originales.
Si es mayor que el Elemento, se la recortará, y si es más pequeña, dejará áreas transparentes que luego podrán rellenarse mediante las opciones de repetición.
Ten en cuenta que al utilizar una imagen con su tamaño natural, se verá más grande o más pequeña en función del tamaño de la pantalla de la Gráfica (también definida en píxeles)
Repetición
Permite elegir si la imagen se repetirá. Funciona solamente con las opciones Ajustar y Tamaño natural. Si seleccionas una de esas opciones de tamaño, podrás elegir cómo repetirlas:
Horizontalmente (repetir en el eje X)
Verticalmente (repetir en el eje Y)
Ambas direcciones (repetir)
Position
Permite ajustar el lugar en donde se ubica la Imagen de fondo. Esta opción no está disponible para el Tamaño de imagen: "Estirar".
