Cómo lo hice: Análisis dinámico con el contenedor de diseño

Este ejemplo le muestra cómo puede crear contenido de hoja dinámico e interactivo con el contenedor de diseño.El contenedor de diseño admite el diseño sin cuadrícula y las visualizaciones apiladas, lo que permite un control exhaustivo sobre la disposición de su contenido analítico. Además, al igual que con otros objetos de contenedor, puede presentar dinámicamente información diferente dependiendo de una variedad de condiciones, como estados de variables y selecciones.

Este ejemplo muestra cómo puede crear un contenedor de diseño para presentar información de varios gráficos como un único objeto. Algunos enfoques de diseño generales incluyen:

Organizar objetos similares de forma simétrica, utilizando estilos para distinguir diferentes secciones de datos.
Eliminar los bordes de los objetos individuales dentro del contenedor de diseño y, a continuación, añadir un borde alrededor de todo el objeto una vez terminado.
Mostrar diferentes objetos o datos condicionalmente según la interacción del usuario; en este ejemplo, un gráfico de barras en el que el usuario puede mostrar u ocultar los detalles.
Creación de elementos compuestos que consisten en varios objetos diferentes colocados uno al lado del otro; en este ejemplo, un botón interactivo que imita un interruptor de encendido/apagado.
Permitir múltiples formas para que los usuarios seleccionen y filtren datos cuando necesiten examinarlos más de cerca.

Contenedor de diseño finalizado para el ejemplo — Resultado final

Preparativos

Cree una nueva app y pegue el Ejemplo: script de carga en una nueva sección en el Editor de carga de datos. A continuación, cargue los datos.

Después de cargar los datos, cambie a la vista de hoja.

Ejemplo: script de carga

SET DateFormat='M/D/YYYY';

Sales:

Load 

date(Now()-Offset,'MM/DD/YYYY') as [Order Date],

* Inline [

Order ID,Offset,Product Type,Shipment Status,Fulfillment Center,Sales,Late Status,Days Late
1,30,Electronics,Delivered,10036,9950,Not Late,
2,30,Office Supplies,Delivered,10036,4412,Not Late,
3,30,Office Supplies,Delivered,10038,7480,Late,3
4,30,Home Improvement,Delivered,10035,665,Late,4
5,30,Home Improvement,Delivered,10038,594,Not Late,
6,30,Home Improvement,Stalled,10038,8267,Not Late,
7,30,Clothing,Delivered,10035,1014,Not Late,
8,30,Cleaning Products,Delivered,10036,6999,Late,1
9,30,Electronics,Delivered,10036,733,Not Late,
10,29,Office Supplies,Delivered,10036,3487,Not Late,
11,29,Office Supplies,Delivered,10035,7343,Not Late,
12,29,Office Supplies,Delivered,10036,9239,Late,14
13,27,Cleaning Products,Delivered,10037,1463,Not Late,
14,27,Cleaning Products,Stalled,10035,4688,Not Late,
15,27,Home Improvement,Delivered,10038,5539,Late,2
16,27,Clothing,Delivered,10035,8388,Not Late,
17,27,Office Supplies,Delivered,10035,7560,Not Late,
18,27,Office Supplies,Delivered,10035,5738,Not Late,
19,27,Office Supplies,Delivered,10035,5469,Not Late,
20,26,Home Improvement,Delivered,10037,1435,Not Late,
21,26,Office Supplies,Delivered,10036,5962,Late,1
22,26,Clothing,Delivered,10035,4020,Late,7
23,26,Electronics,Delivered,10036,3888,Late,5
24,25,Office Supplies,Delivered,10037,6496,Not Late,
25,25,Clothing,Delivered,10038,4215,Late,11
26,25,Home Improvement,Delivered,10036,1801,Not Late,
27,25,Grocery,Delivered,10036,6471,Not Late,
28,24,Home Improvement,In Transit,10036,4578,Not Late,
29,24,Office Supplies,Cancelled,10037,3493,Not Late,
30,24,Office Supplies,Cancelled,10035,6572,Not Late,
31,24,Electronics,In Transit,10037,6691,Not Late,
32,24,Office Supplies,In Transit,10038,2721,Late,9
33,24,Grocery,In Transit,10035,8300,Not Late,
34,23,Grocery,In Transit,10035,840,Not Late,
35,23,Office Supplies,In Transit,10036,8972,Not Late,
36,23,Cleaning Products,Stalled,10036,9474,Not Late,
37,23,Home Improvement,In Transit,10038,1935,Not Late,
38,23,Office Supplies,In Transit,10036,1748,Not Late,
39,23,Seasonal,In Transit,10037,1948,Not Late,
40,22,Office Supplies,In Transit,10035,3121,Not Late,
41,22,Electronics,In Transit,10036,7377,Not Late,
42,22,Cleaning Products,In Transit,10037,1492,Not Late,
43,22,Office Supplies,Stalled,10037,7801,Late,6
44,22,Office Supplies,In Transit,10035,4663,Not Late,
45,22,Grocery,In Transit,10035,4649,Not Late,
46,21,Seasonal,In Transit,10038,2612,Not Late,
47,20,Clothing,In Transit,10036,8880,Late,4
48,20,Office Supplies,In Transit,10036,1391,Late,8
49,20,Cleaning Products,Cancelled,10037,1307,Not Late,
50,20,Home Improvement,In Transit,10037,6424,Not Late,
51,20,Grocery,In Transit,10035,5051,Not Late,
52,20,Cleaning Products,In Transit,10035,1286,Not Late,
53,19,Cleaning Products,In Transit,10038,8719,Not Late,
54,19,Office Supplies,In Transit,10037,8576,Not Late,
55,19,Seasonal,In Transit,10038,2866,Not Late,
56,19,Electronics,Stalled,10035,5186,Late,3
57,19,Clothing,In Transit,10038,4079,Not Late,
58,19,Office Supplies,In Transit,10038,706,Not Late,
59,19,Seasonal,In Transit,10036,6111,Not Late,
60,19,Clothing,In Transit,10036,5677,Not Late,
61,19,Home Improvement,In Transit,10037,3993,Not Late,
62,19,Office Supplies,In Transit,10037,1625,Not Late,
63,19,Seasonal,In Transit,10035,5805,Not Late,
64,19,Home Improvement,In Transit,10035,4453,Not Late,
65,19,Office Supplies,In Transit,10038,2252,Not Late,
66,18,Electronics,In Transit,10038,8362,Not Late,
67,18,Clothing,In Transit,10037,4182,Not Late,
68,18,Cleaning Products,In Transit,10038,9044,Not Late,
69,18,Clothing,In Transit,10035,6531,Not Late,
70,18,Office Supplies,In Transit,10035,8408,Not Late,
71,17,Home Improvement,Stalled,10038,9629,Not Late,
72,17,Seasonal,Preparation,10035,2128,Not Late,
73,17,Home Improvement,Cancelled,10038,1024,Not Late,
74,17,Office Supplies,Preparation,10037,9684,Late,2
75,17,Electronics,Preparation,10036,6753,Late,2
76,16,Clothing,Preparation,10036,3192,Not Late,
77,16,Office Supplies,Preparation,10038,3954,Not Late,
78,16,Office Supplies,Preparation,10035,8377,Not Late,
79,16,Office Supplies,Preparation,10038,2334,Not Late,
80,15,Grocery,Preparation,10037,7178,Not Late,
81,15,Office Supplies,Preparation,10037,1188,Not Late,
82,15,Electronics,Preparation,10035,4908,Not Late,
83,15,Electronics,Preparation,10035,3552,Not Late,
84,15,Clothing,Preparation,10037,875,Not Late,
85,14,Office Supplies,Preparation,10038,7886,Late,4
86,14,Home Improvement,Cancelled,10036,2358,Late,1
87,14,Clothing,Preparation,10037,8368,Not Late,
88,14,Grocery,Preparation,10037,142,Not Late,
89,14,Office Supplies,Preparation,10037,5537,Not Late,
90,14,Home Improvement,Preparation,10035,3231,Not Late,
91,14,Clothing,Preparation,10036,2283,Not Late,
92,14,Office Supplies,Preparation,10038,5952,Not Late,
93,13,Office Supplies,Preparation,10038,5513,Not Late,
94,13,Home Improvement,Preparation,10036,5871,Not Late,
95,13,Grocery,Preparation,10038,4425,Not Late,
96,13,Clothing,Preparation,10037,500,Late,1
97,13,Electronics,Preparation,10037,9792,Not Late,
98,13,Seasonal,Preparation,10035,4576,Not Late,
99,13,Office Supplies,Preparation,10038,228,Not Late,
100,13,Cleaning Products,Preparation,10037,3086,Late,1
101,13,Office Supplies,Preparation,10038,2329,Not Late,
102,12,Home Improvement,Preparation,10036,8862,Not Late,
103,12,Office Supplies,Preparation,10037,3991,Not Late,
104,12,Office Supplies,Preparation,10037,5435,Not Late,
105,12,Grocery,Preparation,10038,2476,Not Late,
106,12,Clothing,Preparation,10037,8362,Not Late,
107,12,Seasonal,Preparation,10035,1496,Not Late,
108,12,Electronics,Preparation,10038,3210,Not Late,
109,11,Clothing,Preparation,10038,7692,Not Late,
110,11,Cleaning Products,Preparation,10037,1585,Not Late,
111,11,Home Improvement,Cancelled,10037,1874,Not Late,
112,11,Office Supplies,Preparation,10037,869,Not Late,
113,11,Office Supplies,Preparation,10036,8578,Not Late,
114,10,Office Supplies,Preparation,10036,684,Not Late,
115,10,Electronics,Preparation,10036,9889,Not Late,
116,10,Office Supplies,Preparation,10036,4256,Not Late,
117,8,Seasonal,Preparation,10038,9288,Late,7
118,8,Office Supplies,Cancelled,10038,1534,Not Late,
119,8,Seasonal,Preparation,10038,7496,Not Late,
120,8,Electronics,Preparation,10036,8454,Late,3
121,8,Office Supplies,Stalled,10038,1063,Late,
122,8,Office Supplies,Preparation,10037,5958,Not Late,
123,8,Seasonal,Preparation,10036,686,Not Late,
124,8,Grocery,Preparation,10036,1799,Not Late,
125,8,Clothing,Stalled,10036,8485,Not Late,
126,7,Office Supplies,Preparation,10036,6451,Not Late,
127,7,Office Supplies,Pending,10036,1212,Not Late,
128,7,Electronics,Pending,10037,9037,Not Late,
129,7,Electronics,Pending,10037,6522,Late,20
130,7,Electronics,Pending,10038,8865,Late,4
131,7,Clothing,Cancelled,10036,7929,Not Late,
132,6,Seasonal,Pending,10038,9082,Not Late,
133,6,Office Supplies,Pending,10037,6563,Not Late,
134,6,Seasonal,Pending,10038,3513,Not Late,
135,5,Office Supplies,Pending,10035,2340,Not Late,
136,5,Cleaning Products,Pending,10035,590,Not Late,
137,5,Office Supplies,Pending,10035,542,Not Late,
138,5,Cleaning Products,Pending,10035,4809,Not Late,
139,5,Grocery,Cancelled,10035,1743,Not Late,
140,5,Office Supplies,Pending,10035,8312,Not Late,
141,4,Clothing,Pending,10035,5895,Not Late,
142,4,Clothing,Pending,10037,4882,Not Late,
143,4,Clothing,Pending,10037,9106,Not Late,
144,3,Office Supplies,Pending,10036,7422,Late,1
145,3,Clothing,Pending,10038,2686,Not Late,
146,3,Office Supplies,Pending,10037,698,Late,3
147,3,Office Supplies,Pending,10035,9514,Not Late,
148,2,Home Improvement,Pending,10037,6206,Late,2
149,2,Office Supplies,Pending,10035,9158,Not Late,
150,1,Electronics,Cancelled,10036,3204,Not Late,

];

drop field Offset;

Parte 1: Crear la variable

Primero, cree la variable. Esta variable está sujeta a condiciones que se añadirán más tarde. Los valores de la variable se cambiarán durante el análisis mediante interacciones con objetos de botón.

Cree la siguiente variable. Establezca la Definición en =false().

vViewChartValues

Crear una variable

Parte 2: Crear el contenedor de diseño

Haga lo siguiente:

En el panel de activos, abra Objetos personalizados > Dashboard bundle y arrastre un objeto Layout container a la hoja.
Cambie el tamaño del contenedor para que sea de 17 por 10 cuadrados en la cuadrícula de la hoja.

Parte 3: Agregar visualizaciones al contenedor de diseño

A continuación, añada visualizaciones al contenedor de diseño.

Haga lo siguiente:

Seleccione el contenedor de diseño.
En el panel de propiedades, en Contenido > Gráficos, haga clic en Añadir. Seleccione Botón.
Expanda el elemento. Establezca la Etiqueta en Button_NotLateTitle.
En Tamaño, establezca lo siguiente:
- Ancho (%): 48
- Alto (%): 9
En Posición, establezca lo siguiente:
- Eje X (%): 1
- Eje Y (%): 1
Haga clic en Editar propiedades.
Expanda Acciones y navegación.
Haga clic en Añadir acción.
Para la Acción, seleccione Seleccionar valores en un campo.
Para el Campo, seleccione Late Status.
Para Valor, haga clic en .
Añada lo siguiente:
```
='Not Late'
```
Haga clic en Aplicar.
Expanda Aspecto > General.
Configure Not Late para la Etiqueta.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: Valor máximo
- Color de fuente > Color: #006580
- Opciones de fondo > Color utilizado: #ffffff
Haga clic en para salir del panel de estilo.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Añadir. Seleccione Botón.
Expanda el elemento. Establezca la Etiqueta en Button_LateTitle.
En Tamaño, establezca lo siguiente:
- Ancho (%): 48
- Alto (%): 9
En Posición, establezca lo siguiente:
- Eje X (%): 51
- Eje Y (%): 1
Haga clic en Editar propiedades.
Expanda Acciones y navegación.
Haga clic en Añadir acción.
Para la Acción, seleccione Seleccionar valores en un campo.
Para el Campo, seleccione Late Status.
Para Valor, haga clic en .
Añada lo siguiente:
```
='Late'
```
Haga clic en Aplicar.
Expanda Aspecto > General.
Configure Late para la Etiqueta.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: Valor máximo
- Color de fuente > Color: #87205d
- Opciones de fondo > Color utilizado: #ffffff
Haga clic en para salir del panel de estilo.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Añadir. Seleccione Indicador.
Expanda el elemento. Establezca la Etiqueta en Gauge_NotLate.
En Tamaño, establezca lo siguiente:
- Ancho (%): 48
- Alto (%): 15
En Posición, establezca lo siguiente:
- Eje X (%): 1
- Eje Y (%): 11
Haga clic en Editar propiedades.
Añada Sum(Sales) como medida.
En el panel de propiedades, en Datos, en Filtros, haga clic en Añadir.
Seleccione Late Status. Expanda el filtro.
Mantenga el tipo de filtro predeterminado Valores y marque la casilla de verificación Not Late. Esto filtra los datos de visualización para mostrar solo los registros que contienen un valor de Late Status de Not Late.
Expanda Aspecto > General.
Establezca Mostrar títulos en Desactivado.
Amplíe Aspecto > Presentación.
En Límites de rango, establezca Máx. en lo siguiente:
```
=Sum({1} Sales)
```
Cambie la configuración del gráfico de Radial a Barra.
Cambie la Orientación de Automático a Personalizado y asegúrese de que Horizontal esté seleccionado.
Desactive Usar biblioteca y establezca el Color en #006580.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Establezca el color de la Etiqueta de valor en #ffffff.
Haga clic en para salir del panel de estilos.
Expanda Aspecto > Eje de medida: Sum(Sales).
Establezca Etiquetas y título en Ninguno.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Añadir. Seleccione Indicador.
Expanda el elemento. Establezca la Etiqueta en Gauge_Late.
En Tamaño, establezca lo siguiente:
- Ancho (%): 48
- Alto (%): 15
En Posición, establezca lo siguiente:
- Eje X (%): 51
- Eje Y (%): 11
Haga clic en Editar propiedades.
Añada Sum(Sales) como medida.
En el panel de propiedades, en Datos, en Filtros, haga clic en Añadir.
Seleccione Late Status. Expanda el filtro.
Mantenga el tipo de filtro predeterminado Valores y marque la casilla de verificación Late. Esto filtra los datos de visualización para mostrar solo los registros que contienen un valor de Late Status de Late.
Expanda Aspecto > General.
Establezca Mostrar títulos en Desactivado.
Amplíe Aspecto > Presentación.
En Límites de rango, establezca Máx. en lo siguiente:
```
=Sum({1} Sales)
```
Cambie la configuración del gráfico de Radial a Barra.
Cambie la Orientación de Automático a Personalizado, y asegúrese de que Horizontal esté seleccionado.
Desactive Usar biblioteca y establezca el Color en #87205d.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Establezca el color de la Etiqueta de valor en #ffffff.
Haga clic en para salir del panel de estilos.
Expanda Aspecto > Eje de medida: Sum(Sales).
Establezca Etiquetas y título en Ninguno.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Agregar. Seleccione KPI.
Expanda el elemento. Establezca la Etiqueta en KPI_NotLate.
En Tamaño, establezca lo siguiente:
- Ancho (%): 48
- Alto (%): 9
En Posición, establezca lo siguiente:
- Eje X (%): 1
- Eje Y (%): 27
Haga clic en Editar propiedades.
Añada Sum(Sales) como medida.
En las propiedades de la medida, establezca Formato numérico en Moneda.
Cambie el Patrón de formato a:
```
$ #,##0.00;-$ #,##0.00
```
En el panel de propiedades, en Datos > Filtros, haga clic en Añadir.
Seleccione Late Status. Expanda el filtro.
Mantenga el tipo de filtro predeterminado Valores y marque la casilla de verificación Not Late. Esto filtra los datos de visualización para mostrar solo los registros que contienen un valor de Late Status de Not Late.
Expanda Aspecto > General.
Establezca Mostrar títulos en Desactivado.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: Valor máximo
- Desactive Mostrar primer título del KPI
Haga clic en para salir del panel de estilos.
Expanda Aspecto > Color.
Desactive Colores de biblioteca. Establezca el color en #006580.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Agregar. Seleccione KPI.
Expanda el elemento. Establezca la Etiqueta en KPI_Late.
En Tamaño, establezca lo siguiente:
- Ancho (%): 48
- Alto (%): 9
En Posición, establezca lo siguiente:
- Eje X (%): 51
- Eje Y (%): 27
Haga clic en Editar propiedades.
Añada Sum(Sales) como medida.
En las propiedades de la medida, establezca Formato numérico en Moneda.
Cambie el Patrón de formato a:
```
$ #,##0.00;-$ #,##0.00
```
En el panel de propiedades, en Datos > Filtros, haga clic en Añadir.
Seleccione Late Status. Expanda el filtro.
Mantenga el tipo de filtro predeterminado Valores y marque la casilla de verificación Late. Esto filtra los datos de visualización para mostrar solo los registros que contienen un valor de Late Status de Late.
Expanda Aspecto > General.
Establezca Mostrar títulos en Desactivado.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: Valor máximo
- Desactive Mostrar primer título del KPI
Haga clic en para salir del panel de estilos.
Expanda Aspecto > Color.
Desactive los Colores de biblioteca. Configure el color en #87205d.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Añadir. Seleccione Gráfico de barras.
Expanda el elemento. Establezca la Etiqueta en BarChart_Simple.
Para Condición de visualización, haga clic en .
Añada lo siguiente:
```
=vViewChartValues=false()
```
Haga clic en Aplicar.
En Tamaño, establezca lo siguiente:
- Ancho (%): 81
- Alto (%): 62
En Posición, establezca lo siguiente:
- Eje X (%): 1
- Eje Y (%): 37
Haga clic en Editar propiedades.
Añada Product Type como dimensión.
Añada otra dimensión: Late Status.

Product Type debería aparecer ahora como el Grupo y Late Status como las Barras.
Añada Sum(Sales) como medida.
En las propiedades de la medida, establezca Formato numérico en Moneda.
Cambie el Patrón de formato a:
```
$ #,##0.00;-$ #,##0.00
```
Expanda Aspecto > General.
Establezca Mostrar títulos en Desactivado.
Expanda Aspecto > Presentación.
Cambie de la presentación Agrupada a la Apilada.
Establezca el Espaciado de líneas de cuadrícula en Personalizado. En el menú desplegable, seleccione Sin líneas.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Tamaño de fuente de la Etiqueta del eje: 16 px
Haga clic en para salir del panel de estilo.
Expanda Aspecto > Colores y leyenda.
Configure Colores en Personalizado > Por expresión. Utilice la siguiente expresión:
```
=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d'))
```
Configure Mostrar leyenda en Desactivado.
Expanda Aspecto > Eje X: Product Type, Late Status.
Establezca Etiquetas y título en Solo etiquetas.
Expanda Aspecto > Eje Y: Sum(Sales).
Establezca Etiquetas y título en Solo etiquetas.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Haga lo siguiente:

En Contenido > Gráficos, haga clic con el botón derecho en BarChart_Simple y haga clic en Duplicar.
Expanda el elemento. Establezca la Etiqueta en BarChart_Detailed.
Para Condición de visualización, haga clic en .
Añada lo siguiente:
```
=vViewChartValues=true()
```
Haga clic en Aplicar.
Haga clic en Editar propiedades.
Expanda Aspecto > Presentación.
Active Etiquetas de valor.
Active Etiquetas de segmento y asegúrese de que Etiquetas de total estén activadas.
Haga clic en Opciones de estilo.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Etiqueta del eje tamaño de fuente: 16 px
- Etiquetas de valor tamaño de fuente: 14 px
Haga clic en para salir del panel de estilo.
Expanda Aspecto > Colores y leyenda.
Expanda Aspecto > Eje X: Product Type, Late Status.
Establezca Etiquetas y título en Solo etiquetas.
Expanda Aspecto > Eje Y: Sum(Sales).
Establezca Etiquetas y título en Solo etiquetas.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Cree tres visualizaciones maestras que se utilizarán para construir un botón de alternancia compuesto en el contenedor de diseño. Este interruptor de alternancia permitirá a los usuarios activar y desactivar las etiquetas de valor en el gráfico de barras.

Elemento 1: la base del interruptor de alternancia

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Añadir. Seleccione Botón.
Expanda el elemento. Establezca la Etiqueta en ToggleSwitch_Base.
En Tamaño, establezca lo siguiente:
- Ancho (%): 16
- Alto (%): 7
En Posición, establezca lo siguiente:
- Eje X (%): 83
- Eje Y (%): 90
Haga clic en Editar propiedades.
Expanda Acciones y navegación.
Haga clic en Añadir acción.
En Acción, seleccione Fijar valor de variable.
En Variable, seleccione vViewChartValues.
En Valor, haga clic en .

Agregue la siguiente expresión:

=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false()))

Haga clic en Aplicar.
Expanda Aspecto > General.
Configure Show Values para la Etiqueta.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 2 px.
Establezca el color del Borde en #000000.
Establezca el Radio de redondeo para el Borde en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: 0.5
- Color de fuente > Color: #000000
- Opciones de fondo > Color utilizado: #ffffff
Haga clic en para salir del panel de estilo.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Elemento 2: la parte del botón que representa el estado ACTIVADO

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Añadir. Seleccione Botón.
Expanda el elemento. Establezca la Etiqueta en ToggleSwitch_ON.
Para Condición de visualización, haga clic en .
Añada lo siguiente:
```
=vViewChartValues=true()
```
Haga clic en Aplicar.
En Tamaño, establezca lo siguiente:
- Ancho (%): 4
- Alto (%): 7
En Posición, establezca lo siguiente:
- Eje X (%): 95
- Eje Y (%): 90
Haga clic en Editar propiedades.
Expanda Acciones y navegación.
Haga clic en Añadir acción.
En Acción, seleccione Fijar valor de variable.
En Variable, seleccione vViewChartValues.
En Valor, haga clic en .
Agregue la siguiente expresión:
```
=false()
```
Haga clic en Aplicar.
Expanda Aspecto > General.
Configure On para la Etiqueta.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 2 px.
Establezca el color del Borde en #000000.
Establezca el Radio de redondeo para el Borde en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: 0.5
- Color de fuente > Color: #ffffff
- Opciones de fondo > Color utilizado: #109600
Haga clic en para salir del panel de estilo.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Elemento 3: la parte del botón que representa el estado DESACTIVADO

Haga lo siguiente:

En Contenido > Gráficos, haga clic en Agregar. Seleccione Botón.
Expanda el elemento. Establezca la Etiqueta en ToggleSwitch_ON.
Para Condición de visualización, haga clic en .
Añada lo siguiente:
```
=vViewChartValues=false()
```
Haga clic en Aplicar.
En Tamaño, establezca lo siguiente:
- Ancho (%): 4
- Alto (%): 7
En Posición, establezca lo siguiente:
- Eje X (%): 83
- Eje Y (%): 90
Haga clic en Editar propiedades.
Expanda Acciones y navegación.
Haga clic en Añadir acción.
En Acción, seleccione Fijar valor de variable.
En Variable, seleccione vViewChartValues.
En Valor, haga clic en .
Agregue la siguiente expresión:
```
=true()
```
Haga clic en Aplicar.
Expanda Aspecto > General.
Configure Off para la Etiqueta.
Expanda Aspecto > Presentación.
Haga clic en Opciones de estilo.
En Borde, ajuste el Diseño en 2 px.
Establezca el color del Borde en #000000.
Establezca el Radio de redondeo para el Borde en 0 px.
Cambie a la pestaña Gráfico. Defina las propiedades siguientes:
- Comportamiento del diseño: Adaptable
- Tamaño de fuente: 0.5
- Color de fuente > Color: #ffffff
- Opciones de fondo > Color utilizado: #ff001e
Haga clic en para salir del panel de estilo.
Haga clic en la barra superior del panel para volver al contenedor de diseño.

Parte 4: Finalizar presentación

Finalice el contenedor de diseño añadiendo un título y un borde.

Haga lo siguiente:

En el panel de propiedades, expanda Aspecto > General.
Establezca el título en Atrasado (Late) vs. Pedidos no atrasados (Non-Late Orders) - Impacto en las ventas.
Expanda Aspecto > Presentación.
Active Mantener los gráficos dentro.
Haga clic en Opciones de estilo.
Defina las propiedades siguientes para Borde:
- Diseño: 2 px
- Color: #7b7a78
Defina las propiedades siguientes para Sombra:
- Tamaño Mediano
- Color: #7b7a78

Resultados

Salga del modo de edición. Haga clic en el botón de alternancia para alternar entre el gráfico de barras simple y el detallado.

Contenedor de diseño con la opción "Mostrar valores" desactivada, que presenta el gráfico de barras sin etiquetas de valor — Contenedor de diseño con Mostrar valores desactivado

Contenedor de diseño con la opción "Mostrar valores" activada, que presenta el gráfico de barras con etiquetas de valor — Contenedor de diseño con Mostrar valores activado

Haga clic en los títulos Not Late y Late en la parte superior del gráfico. Tenga en cuenta que al hacer clic en estos elementos se seleccionan los valores correspondientes en la aplicación.

Contenedor de diseño con una selección realizada en el campo "Estado retrasado". — Contenedor de diseño con la selección Not Late en el campo Late Status.

¿Esta página le ha sido útil?

Si encuentra algún problema con esta página o su contenido (errores tipográficos, pasos que faltan o errores técnicos), no dude en ponerse en contacto con nosotros.

Deje aquí sus comentarios