# Come l'ho realizzato: analisi dinamica con il contenitore layout

Questo esempio mostra come creare contenuti dinamici e interattivi del foglio con il contenitore layout.Il contenitore layout supporta la progettazione senza griglia e le visualizzazioni in pila, consentendo un ampio controllo sulla disposizione dei contenuti analitici. Inoltre, come con altri oggetti contenitore, è possibile presentare dinamicamente informazioni diverse a seconda di una varietà di condizioni, come gli stati delle variabili e di selezione.

Questo esempio mostra come creare un contenitore layout per presentare informazioni da più grafici come un oggetto singolo. Alcuni approcci di progettazione generali includono:

* Disporre oggetti simili in modo simmetrico, utilizzando lo stile per distinguere diverse sezioni di dati.

* Rimuovere i bordi dagli oggetti individuali all'interno del contenitore di layout, e quindi aggiungere un bordo attorno all'intero oggetto una volta terminato.

* Visualizzare oggetti o dati diversi in modo condizionale a seconda dell'interazione dell'utente—in questo esempio, un grafico a barre in cui l'utente può mostrare o nascondere i dettagli.

* Costruire elementi compositi costituiti da più oggetti diversi posizionati uno accanto all'altro—in questo esempio, un pulsante interattivo che simula un interruttore on/off.

* Consentire agli utenti di selezionare e filtrare i dati in più modi quando devono esaminarli più da vicino.

Risultato finale

Risultato finale

Risultato finale ![contenitore layout completato per l'esempio](https://help.qlik.com/it-IT/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

## Preparazioni

Creare una nuova applicazione e incollare [Esempio script di caricamento](https://help.qlik.com/it-IT/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm#ExampleData) in una nuova sezione in Editor caricamento dati. Quindi, caricare i dati.

Dopo aver caricato i dati, passare alla vista foglio.

### Esempio script di caricamento

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Dati per l'esempio

```
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: Crea la variabile

Per prima cosa, crea la variabile. Questa variabile è l'oggetto di condizioni che verranno aggiunte in seguito. I valori della variabile verranno modificati durante l'analisi tramite interazioni con oggetti pulsante.

Creare la seguente variabile. Impostare la Definizione su `=false()`.

* vViewChartValues

[Creazione di una variabile](https://help.qlik.com/it-IT/cloud-services/Subsystems/Hub/Content/Sense_Hub/Variables/create-variable-using-dialog.htm)

## Parte 2: Creare il contenitore layout

Procedere come indicato di seguito:

1. Nel pannello risorse, aprire Grafici e, in Oggetti dashboard, trascinare un Contenitore presentazione sul foglio.

2. Ridimensionare il contenitore in modo che sia di 17 per 10 quadrati sulla griglia del foglio.

## Parte 3: Aggiungere visualizzazioni al contenitore di layout

Successivamente, aggiungere visualizzazioni al contenitore di layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Not Late titolo del pulsante

Procedere come indicato di seguito:

1. Selezionare il contenitore di layout.

2. Nel pannello delle proprietà, sotto Contenuto > Grafici, fai clic su Aggiungi. Seleziona Pulsante.

3. Espandere l'elemento. Imposta Etichetta su Button\_NotLateTitle.

4. In Dimensione, imposta quanto segue:

   * Larghezza (%): 48

   * Altezza (%): 9

5. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 1

   * Asse Y (%): 1

6. Fai clic su Modifica proprietà.

7. Espandi Azioni e navigazione.

8. Fare clic su Aggiungi azione.

9. Per l'Azione, seleziona Seleziona valori in un campo.

10. Per il Campo, seleziona Late Status.

11. Per Valore, fai clic su the Aprire l'editor delle espressioni icon.

12. Aggiungi quanto segue:

    ```
    ='Not Late'
    ```

13. Fare clic su Applica.

14. Espandere Aspetto > General.

15. Impostare Not Late come Etichetta.

16. Espandere Aspetto > Presentazione.

17. Fare clic su the Stile icon .

18. Sotto Bordo, impostare Contorno a 0 px.

19. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione carattere: Valore massimo

    * Colore carattere > Colore: #006580

    * Opzioni sfondo > Colore utilizzato: #ffffff

20. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

21. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Titolo del pulsante Late

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fare clic su Aggiungi. Selezionare Pulsante.

2. Espandere l'elemento. Imposta Etichetta su Button\_LateTitle.

3. In Dimensione, imposta quanto segue:

   * Larghezza (%): 48

   * Altezza (%): 9

4. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 51

   * Asse Y (%): 1

5. Fai clic su Modifica proprietà.

6. Espandi Azioni e navigazione.

7. Fare clic su Aggiungi azione.

8. Per l'Azione, seleziona Seleziona valori in un campo.

9. Per il Campo, seleziona Late Status.

10. Per Valore, fai clic su the Aprire l'editor delle espressioni icon.

11. Aggiungi quanto segue:

    ```
    ='Late'
    ```

12. Fare clic su Applica.

13. Espandere Aspetto > General.

14. Impostare Late come Etichetta.

15. Espandere Aspetto > Presentazione.

16. Fare clic su the Stile icon .

17. Sotto Bordo, impostare Contorno a 0 px.

18. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione carattere: Valore massimo

    * Colore carattere > Colore: #87205d

    * Opzioni sfondo > Colore utilizzato: #ffffff

19. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

20. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Not Late misuratore

Procedere come indicato di seguito:

1. Sotto Contenuto > Grafici, fai clic su Aggiungi. Seleziona Misuratore.

2. Espandi l'elemento. Imposta Etichetta su Gauge\_NotLate.

3. In Dimensione, imposta quanto segue:

   * Larghezza (%): 48

   * Altezza (%): 15

4. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 1

   * Asse Y (%): 11

5. Fai clic su Modifica proprietà.

6. Aggiungere Sum(Sales) come misura.

7. Nel pannello delle proprietà, in Dati > Filtri, fare clic su Aggiungi.

8. Selezionare Late Status. Espandere il filtro.

9. Mantenere il tipo di filtro predefinito Valori e selezionare la Not Late casella di controllo. Questo filtra i dati di visualizzazione solo ai record che contengono un valore Late Status di Not Late.

10. Espandere Aspetto > General.

11. Impostare Mostra titoli su Disattivato.

12. Espandere Aspetto > Presentazione.

13. In Limiti intervallo, impostare Max come segue:

    ```
    =Sum({1} Sales)
    ```

14. Modificare la configurazione del grafico da Radiale a Barra.

15. Modificare l'Orientamento da Automatico a Personalizzato e assicurarsi che Orizzontale sia selezionato.

16. Disattivare Usa libreria e impostare il Colore su #006580.

17. Fare clic su the Stile icon .

18. Sotto Bordo, impostare Contorno a 0 px.

19. Passare alla scheda Grafico. Impostare il colore per l'etichetta Valore su #ffffff.

20. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

21. Espandere Aspetto > Asse della misura: Sum(Sales).

22. Imposta Etichette e titolo su Nessuno.

23. Fai clic sulla barra superiore nel pannello per tornare al contenitore di layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Late misuratore

Procedere come indicato di seguito:

1. Sotto Contenuto > Grafici, fai clic su Aggiungi. Seleziona Misuratore.

2. Espandi l'elemento. Imposta Etichetta su Gauge\_Late.

3. In Dimensione, imposta quanto segue:

   * Larghezza (%): 48

   * Altezza (%): 15

4. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 51

   * Asse Y (%): 11

5. Fai clic su Modifica proprietà.

6. Aggiungere Sum(Sales) come misura.

7. Nel pannello delle proprietà, in Dati > Filtri, fare clic su Aggiungi.

8. Selezionare Late Status. Espandere il filtro.

9. Mantenere il tipo di filtro predefinito Valori e selezionare la Late casella di controllo. Questo filtra i dati di visualizzazione solo ai record che contengono un valore Late Status di Late.

10. Espandere Aspetto > General.

11. Impostare Mostra titoli su Disattivato.

12. Espandere Aspetto > Presentazione.

13. In Limiti intervallo, impostare Max come segue:

    ```
    =Sum({1} Sales)
    ```

14. Modificare la configurazione del grafico da Radiale a Barra.

15. Modificare l'Orientamento da Automatico a Personalizzato e assicurarsi che Orizzontale sia selezionato.

16. Disattivare Usa libreria e impostare il Colore su #87205d.

17. Fare clic su the Stile icon .

18. Sotto Bordo, impostare Contorno a 0 px.

19. Passare alla scheda Grafico. Impostare il colore per l'etichetta Valore su #ffffff.

20. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

21. Espandere Aspetto > Asse della misura: Sum(Sales).

22. Imposta Etichette e titolo su Nessuno.

23. Fai clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Not Late KPI

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fai clic su Aggiungi. Seleziona KPI.

2. Espandi la voce. Imposta Etichetta su KPI\_NotLate.

3. In Dimensione, imposta quanto segue:

   * Larghezza (%): 48

   * Altezza (%): 9

4. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 1

   * Asse Y (%): 27

5. Fare clic su Modifica proprietà.

6. Aggiungere Sum(Sales) come misura.

7. Nelle proprietà per la misura, impostare Formattazione numeri su Valuta.

8. Modificare il Modello di formato in:

   ```
   $ #,##0.00;-$ #,##0.00
   ```

9. Nel pannello delle proprietà, sotto Dati > Filtri, fare clic su Aggiungi.

10. Selezionare Late Status. Espandere il filtro.

11. Mantenere il tipo di filtro predefinito Valori e selezionare la Not Late casella di controllo. Questo filtra i dati di visualizzazione solo ai record che contengono un valore Late Status di Not Late.

12. Espandere Aspetto > General.

13. Impostare Mostra titoli su Disattivato.

14. Espandere Aspetto > Presentazione.

15. Fare clic su the Stile icon .

16. Sotto Bordo, impostare Contorno a 0 px.

17. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione carattere: Valore massimo

    * Disattiva Mostra titolo primo KPI

18. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

19. Espandere Aspetto > Colore.

20. Disattivare Colori libreria. Impostare il colore su #006580.

21. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Late KPI

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fai clic su Aggiungi. Seleziona KPI.

2. Espandi la voce. Imposta Etichetta su KPI\_Late.

3. In Dimensione, imposta quanto segue:

   * Larghezza (%): 48

   * Altezza (%): 9

4. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 51

   * Asse Y (%): 27

5. Fare clic su Modifica proprietà.

6. Aggiungere Sum(Sales) come misura.

7. Nelle proprietà per la misura, impostare Formattazione numeri su Valuta.

8. Modificare il Modello di formato in:

   ```
   $ #,##0.00;-$ #,##0.00
   ```

9. Nel pannello delle proprietà, sotto Dati > Filtri, fare clic su Aggiungi.

10. Selezionare Late Status. Espandere il filtro.

11. Mantenere il tipo di filtro predefinito Valori e selezionare la Late casella di controllo. Questo filtra i dati di visualizzazione solo ai record che contengono un valore Late Status di Late.

12. Espandere Aspetto > General.

13. Impostare Mostra titoli su Disattivato.

14. Espandere Aspetto > Presentazione.

15. Fare clic su the Stile icon .

16. Sotto Bordo, impostare Contorno a 0 px.

17. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione carattere: Valore massimo

    * Disattiva Mostra titolo primo KPI

18. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

19. Espandere Aspetto > Colore.

20. Disattiva Colori libreria. Impostare il colore su #87205d.

21. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Grafico a barre senza etichette di valore

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fare clic su Aggiungi. Selezionare Grafico a barre.

2. Espandere l'elemento. Imposta l'Etichetta su BarChart\_Simple.

3. Per Condizione di visualizzazione, fai clic su the Aprire l'editor delle espressioni icon.

4. Aggiungi quanto segue:

   ```
   =vViewChartValues=false()
   ```

5. Fare clic su Applica.

6. Sotto Dimensione, imposta quanto segue:

   * Larghezza (%): 81

   * Altezza (%): 62

7. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 1

   * Asse Y (%): 37

8. Fai clic su Modifica proprietà.

9. Aggiungere Product Type come dimensione.

10. Aggiungi un'altra dimensione: Late Status.

    Product Type dovrebbe ora essere elencato come il Gruppo e Late Status come le Barre.

11. Aggiungere Sum(Sales) come misura.

12. Nelle proprietà per la misura, impostare Formattazione numeri su Valuta.

13. Modificare il Modello di formato in:

    ```
    $ #,##0.00;-$ #,##0.00
    ```

14. Espandere Aspetto > General.

15. Impostare Mostra titoli su Disattivato.

16. Espandere Aspetto > Presentazione.

17. Passare dalla presentazione Raggruppata a quella Impilata.

18. Impostare Spaziatura linee griglia su Personalizzato. Nel menu a discesa, selezionare Nessuna linea.

19. Fare clic su the Stile icon .

20. Sotto Bordo, impostare Contorno a 0 px.

21. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Etichetta asse dimensione carattere: 16 px

22. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

23. Espandere Aspetto > Colori e legenda.

24. Impostare Colori su Personalizza > Per espressione. Utilizzare la seguente espressione:

    ```
    =if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d'))
    ```

25. Impostare Mostra legenda su Disattivato.

26. Espandere Aspetto > Asse X: Product Type, Late Status.

27. Impostare Etichette e titolo su Solo etichette.

28. Espandere Aspetto > Asse Y: Sum(Sales).

29. Impostare Etichette e titolo su Solo etichette.

30. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Grafico a barre con etichette dei valori

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fare clic con il pulsante destro del mouse su BarChart\_Simple e fare clic su Duplica.

2. Espandi la voce. Imposta l'Etichetta su BarChart\_Detailed.

3. Per Condizione di visualizzazione, fai clic su the Aprire l'editor delle espressioni icon.

4. Aggiungi quanto segue:

   ```
   =vViewChartValues=true()
   ```

5. Fare clic su Applica.

6. Fai clic su Modifica proprietà.

7. Espandere Aspetto > Presentazione.

8. Attivare Etichette valore.

9. Attivare Etichette segmento, e assicurarsi che Etichette totali siano attivate.

10. Fare clic su the Stile icon .

11. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Etichetta asse dimensione carattere: 16 px

    * Etichette valori dimensione carattere: 14 px

12. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

13. Espandere Aspetto > Colori e legenda.

14. Espandere Aspetto > Asse X: Product Type, Late Status.

15. Impostare Etichette e titolo su Solo etichette.

16. Espandere Aspetto > Asse Y: Sum(Sales).

17. Impostare Etichette e titolo su Solo etichette.

18. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

[](https://help.qlik.com/en-US/cloud-services/Subsystems/Hub/Content/Sense_Hub/Visualizations/DashboardBundle/layout-container-example.htm)

#### Interruttore a levetta per le etichette dei valori

Crea tre visualizzazioni principali che verranno utilizzate per costruire un pulsante di commutazione composito nel contenitore del layout. Questo interruttore a levetta consentirà agli utenti di attivare e disattivare le etichette dei valori nel grafico a barre.

Elemento 1: Base dell'interruttore a levetta

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fare clic su Aggiungi. Selezionare Pulsante.

2. Espandere l'elemento. Imposta Etichetta su ToggleSwitch\_Base.

3. In Dimensioni, imposta quanto segue:

   * Larghezza (%): 16

   * Altezza (%): 7

4. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 83

   * Asse Y (%): 90

5. Fai clic su Modifica proprietà.

6. Espandi Azioni e navigazione.

7. Fare clic su Aggiungi azione.

8. Per l'Azione, selezionare Imposta valore variabile.

9. Per Variabile, selezionare vViewChartValues.

10. Per Valore, fare clic su the Aprire l'editor delle espressioni icon.

11. Aggiungere l'espressione seguente:

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

12. Fare clic su Applica.

13. Espandere Aspetto > General.

14. Impostare Show Values come Etichetta.

15. Espandere Aspetto > Presentazione.

16. Fare clic su the Stile icon .

17. In Bordo, impostare Contorno su 2 px.

18. Impostare il colore del Bordo su #000000.

19. Impostare il Raggio angolo per il Bordo su 0 px.

20. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione formato carattere: 0.5

    * Colore carattere > Colore: #000000

    * Opzioni sfondo > Colore utilizzato: #ffffff

21. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

22. Fare clic sulla barra superiore nel pannello per tornare al contenitore di layout.

Elemento 2: Parte del pulsante che rappresenta lo stato ON

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fare clic su Aggiungi. Selezionare Pulsante.

2. Espandere l'elemento. Imposta l'Etichetta su ToggleSwitch\_ON.

3. Per Condizione di visualizzazione, fai clic su the Aprire l'editor delle espressioni icon.

4. Aggiungi quanto segue:

   ```
   =vViewChartValues=true()
   ```

5. Fare clic su Applica.

6. In Dimensione, imposta quanto segue:

   * Larghezza (%): 4

   * Altezza (%): 7

7. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 95

   * Asse Y (%): 90

8. Fai clic su Modifica proprietà.

9. Espandi Azioni e navigazione.

10. Fare clic su Aggiungi azione.

11. Per l'Azione, selezionare Imposta valore variabile.

12. Per Variabile, selezionare vViewChartValues.

13. Per Valore, fare clic su the Aprire l'editor delle espressioni icon.

14. Aggiungere l'espressione seguente:

    ```
    =false()
    ```

15. Fare clic su Applica.

16. Espandere Aspetto > General.

17. Impostare On come Etichetta.

18. Espandere Aspetto > Presentazione.

19. Fare clic su the Stile icon .

20. In Bordo, impostare Contorno su 2 px.

21. Impostare il colore del Bordo su #000000.

22. Impostare il Raggio angolo per il Bordo su 0 px.

23. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione formato carattere: 0.5

    * Colore carattere > Colore: #ffffff

    * Opzioni sfondo > Colore utilizzato: #109600

24. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

25. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

Elemento 3: Parte del pulsante che rappresenta lo stato OFF

Procedere come indicato di seguito:

1. In Contenuto > Grafici, fare clic su Aggiungi. Selezionare Pulsante.

2. Espandere l'elemento. Imposta l'Etichetta su ToggleSwitch\_ON.

3. Per Condizione di visualizzazione, fai clic su the Aprire l'editor delle espressioni icon.

4. Aggiungi quanto segue:

   ```
   =vViewChartValues=false()
   ```

5. Fare clic su Applica.

6. In Dimensione, imposta quanto segue:

   * Larghezza (%): 4

   * Altezza (%): 7

7. Sotto Posizione, imposta quanto segue:

   * Asse X (%): 83

   * Asse Y (%): 90

8. Fai clic su Modifica proprietà.

9. Espandi Azioni e navigazione.

10. Fare clic su Aggiungi azione.

11. Per l'Azione, selezionare Imposta valore variabile.

12. Per Variabile, selezionare vViewChartValues.

13. Per Valore, fare clic su the Aprire l'editor delle espressioni icon.

14. Aggiungere l'espressione seguente:

    ```
    =true()
    ```

15. Fare clic su Applica.

16. Espandere Aspetto > General.

17. Impostare Off come Etichetta.

18. Espandere Aspetto > Presentazione.

19. Fare clic su the Stile icon .

20. In Bordo, impostare Contorno su 2 px.

21. Impostare il colore del Bordo su #000000.

22. Impostare il Raggio angolo per il Bordo su 0 px.

23. Passare alla scheda Grafico. Impostare le seguenti proprietà:

    * Comportamento della presentazione: Reattivo

    * Dimensione formato carattere: 0.5

    * Colore carattere > Colore: #ffffff

    * Opzioni sfondo > Colore utilizzato: #ff001e

24. Fare clic su the Freccia sinistra icon per uscire dal pannello di stile.

25. Fare clic sulla barra superiore nel pannello per tornare al contenitore del layout.

## Parte 4: Finalizzare la presentazione

Finalizzare il contenitore layout aggiungendo un titolo e un bordo.

Procedere come indicato di seguito:

1. Nel pannello delle proprietà, espandere Aspetto > Generale.

2. Impostare il titolo su Ordini in ritardo vs. Ordini non in ritardo - Impatto sulle vendite.

3. Espandere Aspetto > Presentazione.

4. Attiva Mantieni grafici dentro.

5. Fai clic su the Stile icon .

6. Imposta le seguenti proprietà per Bordo:

   * Contorno: 2 px

   * Colore: #7b7a78

7. Imposta le seguenti proprietà per Ombra:

   * Dimensione media

   * Colore: #7b7a78

## Risultati

Uscire dalla modalità di modifica del foglio. Fai clic sul pulsante di attivazione/disattivazione per alternare tra il grafico a barre semplice e quello dettagliato.

Contenitore del layout con Mostra valori disattivato

Contenitore del layout con Mostra valori disattivato

Contenitore del layout con Mostra valoriMostra valori disattivato ![Contenitore layout con 'Mostra valori' disattivato, che presenta il grafico a barre senza etichette di valore](https://help.qlik.com/it-IT/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final-simple-view.png)

Contenitore layout con Mostra valori attivato

Contenitore layout con Mostra valori attivato

Contenitore layout con Mostra valoriMostra valori attivato ![Contenitore layout con 'Mostra valori' attivato, che presenta il grafico a barre con etichette di valore](https://help.qlik.com/it-IT/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final.png)

Fare clic sui titoli Not Late e Late nella parte superiore del grafico. Si noti che facendo clic su questi elementi vengono selezionati i valori corrispondenti nell'applicazione.

Contenitore di layout con selezione Not Late nel campo Late Status.

Contenitore di layout con selezione Not Late nel campo Late Status.

Contenitore di layout con selezione Not LateNot Late nel campo Late StatusLate Status. ![Contenitore di layout con selezione effettuata nel campo 'Stato in ritardo'.](https://help.qlik.com/it-IT/cloud-services/Subsystems/Hub/Content/Resources/Images/ui_example-layout-container-final_selections.png)