Procédure : Analyse dynamique avec le conteneur de disposition
Cet exemple vous montre comment créer un contenu de feuille dynamique et interactif avec le conteneur de disposition. Le conteneur de disposition supporte la conception sans grille et les visualisations empilées, offrant un contrôle étendu sur l'agencement de votre contenu analytique. De plus, comme avec d'autres objets de type conteneur, vous pouvez présenter dynamiquement différentes informations en fonction de diverses conditions telles que des états de variable et de sélection.
Cet exemple montre comment créer un conteneur de disposition pour présenter des informations provenant de plusieurs graphiques sous la forme d'un seul objet. Voici quelques approches de conception générales :
-
Organisation des objets similaires de manière symétrique, en utilisant des styles pour distinguer différentes sections de données.
-
Suppression des bordures des objets individuels à l'intérieur du conteneur de disposition, puis ajout d'une bordure autour de l'objet tout entier une fois terminé.
-
Affichage de différents objets ou données de manière conditionnelle en fonction de l'interaction de l'utilisateur — dans cet exemple, un graphique à barres sur lequel l'utilisateur peut afficher ou masquer les détails.
-
Construction d'éléments composites constitués de plusieurs objets différents placés côte à côte — dans cet exemple, un bouton interactif qui imite un interrupteur Marche/Arrêt.
-
Laisser aux utilisateurs le choix entre plusieurs options pour sélectionner et filtrer les données lorsqu'ils ont besoin de procéder à un examen plus approfondi.
Résultat final

Préparations
Créez une nouvelle application et collez Exemple de script de chargement dans une nouvelle section dans Éditeur de chargement de données. Chargez ensuite les données.
Après avoir chargé les données, passez en mode feuille.
Exemple de script de chargement
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;
Première partie : Création de la variable
Commencez par créer la variable. Cette variable fera l'objet de conditions qui seront ajoutées ultérieurement. Les valeurs de la variable seront modifiées lors de l'analyse par des interactions avec des objets de type bouton.
Créez la variable suivante. Réglez la Définition sur =false().
-
vViewChartValues
Deuxième partie : Création du conteneur de disposition
Procédez comme suit :
-
Dans le panneau des ressources, ouvrez
Objets personnalisés > Dashboard bundle et faites glisser un Layout container sur la feuille.
-
Redimensionnez le conteneur de sorte qu'il occupe 17 carrés sur 10 sur la grille de la feuille.
Troisième partie : Ajout de visualisations au conteneur de disposition
Ajoutez ensuite des visualisations au conteneur de disposition.
Procédez comme suit :
-
Sélectionnez le conteneur de disposition.
-
Dans le panneau des propriétés, sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Bouton.
-
Développez l'élément. Définissez l'Étiquette sur Button_NotLateTitle.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 48
-
Hauteur (%) : 9
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 1
-
Axe des ordonnées (%) : 1
-
-
Cliquez sur Modifier les propriétés.
-
Développez Actions et navigation.
-
Cliquez sur Ajouter une action.
-
Pour Action, sélectionnez Sélectionner des valeurs dans un champ.
-
Pour Champ, sélectionnez Late Status.
-
Pour Valeur, cliquez sur
.
-
Ajoutez le paramètre suivant :
='Not Late' -
Cliquez sur Appliquer.
-
Développez Aspect > Général.
-
Définissez Not Late comme Étiquette.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : Valeur maximale
-
Couleur de police > Couleur : #006580
-
Options d'arrière-plan > Couleur utilisée : #ffffff
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Bouton.
-
Développez l'élément. Définissez l'Étiquette sur Button_LateTitle.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 48
-
Hauteur (%) : 9
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 51
-
Axe des ordonnées (%) : 1
-
-
Cliquez sur Modifier les propriétés.
-
Développez Actions et navigation.
-
Cliquez sur Ajouter une action.
-
Pour Action, sélectionnez Sélectionner des valeurs dans un champ.
-
Pour Champ, sélectionnez Late Status.
-
Pour Valeur, cliquez sur
.
-
Ajoutez le paramètre suivant :
='Late' -
Cliquez sur Appliquer.
-
Développez Aspect > Général.
-
Définissez Late comme Étiquette.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : Valeur maximale
-
Couleur de police > Couleur : #87205d
-
Options d'arrière-plan > Couleur utilisée : #ffffff
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Jauge.
-
Développez l'élément. Définissez l'Étiquette sur Gauge_NotLate.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 48
-
Hauteur (%) : 15
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 1
-
Axe des ordonnées (%) : 11
-
-
Cliquez sur Modifier les propriétés.
-
Ajoutez Sum(Sales) comme mesure.
-
Dans le panneau des propriétés, sous Données > Filtres, cliquez sur Ajouter.
-
Sélectionnez Late Status. Développer le filtre.
-
Conservez le type de filtre Valeurs par défaut et cochez la case Not Late. Cette option filtre les données de visualisation pour n'afficher que les enregistrements qui contiennent une valeur Late Status égale à Not Late.
-
Développez Aspect > Général.
-
Définissez Afficher les titres sur Désactivé.
-
Développez Aspect > Présentation.
-
Sous Limites de plage, définir Maxi. comme suit :
=Sum({1} Sales) -
Remplacez la configuration de graphique Radial par Barre.
-
Remplacez l'Orientation Auto par Personnalisé et assurez-vous que Horizontal est sélectionné.
-
Désactivez Utiliser la bibliothèque, et définissez la Couleur sur #006580.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez la couleur de l'Étiquette de valeur sur #ffffff.
-
Cliquez sur
pour quitter le panneau de styles.
-
Développez Aspect > Axe de mesure : Sum(Sales).
-
Définissez Étiquettes et titre sur Aucun.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Jauge.
-
Développez l'élément. Définissez l'Étiquette sur Gauge_Late.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 48
-
Hauteur (%) : 15
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 51
-
Axe des ordonnées (%) : 11
-
-
Cliquez sur Modifier les propriétés.
-
Ajoutez Sum(Sales) comme mesure.
-
Dans le panneau des propriétés, sous Données > Filtres, cliquez sur Ajouter.
-
Sélectionnez Late Status. Développer le filtre.
-
Conservez le type de filtre Valeurs par défaut et cochez la case Late. Cette option filtre les données de visualisation pour n'afficher que les enregistrements qui contiennent une valeur Late Status égale à Late.
-
Développez Aspect > Général.
-
Définissez Afficher les titres sur Désactivé.
-
Développez Aspect > Présentation.
-
Sous Limites de plage, définir Maxi. comme suit :
=Sum({1} Sales) -
Remplacez la configuration de graphique Radial par Barre.
-
Remplacez l'Orientation Auto par Personnalisé et assurez-vous que Horizontal est sélectionné.
-
Désactivez Utiliser la bibliothèque, et définissez la Couleur sur #87205d.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez la couleur de l'Étiquette de valeur sur #ffffff.
-
Cliquez sur
pour quitter le panneau de styles.
-
Développez Aspect > Axe de mesure : Sum(Sales).
-
Définissez Étiquettes et titre sur Aucun.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez ICP.
-
Développez l'élément. Définissez l'Étiquette sur KPI_NotLate.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 48
-
Hauteur (%) : 9
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 1
-
Axe des ordonnées (%) : 27
-
-
Cliquez sur Modifier les propriétés.
-
Ajoutez Sum(Sales) comme mesure.
-
Dans les propriétés de la mesure, définissez Formatage des nombres sur Devise.
-
Modifiez le Modèle de format comme suit :
$ #,##0.00;-$ #,##0.00 -
Dans le panneau des propriétés, sous Données > Filtres, cliquez sur Ajouter.
-
Sélectionnez Late Status. Développer le filtre.
-
Conservez le type de filtre Valeurs par défaut et cochez la case Not Late. Cette option filtre les données de visualisation pour n'afficher que les enregistrements qui contiennent une valeur Late Status égale à Not Late.
-
Développez Aspect > Général.
-
Définissez Afficher les titres sur Désactivé.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : Valeur maximale
-
Désactivez Afficher le titre du premier indicateur clé de performance, ICP.
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Développez Aspect > Couleur.
-
Désactivez Couleurs de la bibliothèque. Définissez la couleur sur #006580.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez ICP.
-
Développez l'élément. Définissez l'Étiquette sur KPI_Late.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 48
-
Hauteur (%) : 9
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 51
-
Axe des ordonnées (%) : 27
-
-
Cliquez sur Modifier les propriétés.
-
Ajoutez Sum(Sales) comme mesure.
-
Dans les propriétés de la mesure, définissez Formatage des nombres sur Devise.
-
Modifiez le Modèle de format comme suit :
$ #,##0.00;-$ #,##0.00 -
Dans le panneau des propriétés, sous Données > Filtres, cliquez sur Ajouter.
-
Sélectionnez Late Status. Développer le filtre.
-
Conservez le type de filtre Valeurs par défaut et cochez la case Late. Cette option filtre les données de visualisation pour n'afficher que les enregistrements qui contiennent une valeur Late Status égale à Late.
-
Développez Aspect > Général.
-
Définissez Afficher les titres sur Désactivé.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : Valeur maximale
-
Désactivez Afficher le titre du premier indicateur clé de performance, ICP.
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Développez Aspect > Couleur.
-
Désactivez Couleurs de la bibliothèque. Définir la couleur sur #87205d.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Graphique à barres.
-
Développez l'élément. Définissez l'Étiquette sur BarChart_Simple.
-
Pour Condition d'affichage, cliquez sur
.
-
Ajoutez le paramètre suivant :
=vViewChartValues=false() -
Cliquez sur Appliquer.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 81
-
Hauteur (%) : 62
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 1
-
Axe des ordonnées (%) : 37
-
-
Cliquez sur Modifier les propriétés.
-
Ajoutez Product Type comme dimension.
-
Ajoutez une autre dimension : Late Status.
Product Type devrait maintenant être répertorié comme Groupe et Late Status comme Barres.
-
Ajoutez Sum(Sales) comme mesure.
-
Dans les propriétés de la mesure, définissez Formatage des nombres sur Devise.
-
Modifiez le Modèle de format comme suit :
$ #,##0.00;-$ #,##0.00 -
Développez Aspect > Général.
-
Définissez Afficher les titres sur Désactivé.
-
Développez Aspect > Présentation.
-
Passez de la présentation Groupée à Empilée.
-
Définissez Espacement entre les lignes sur Personnalisé. Dans le menu déroulant, sélectionnez Aucune ligne.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Taille de police de l'Étiquette d'axe : 16 px
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Développez Aspect > Couleurs et légende.
-
Définissez Couleurs sur Personnalisées > Par expression. Utilisez l'expression suivante :
=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d')) -
Définissez Afficher la légende sur Désactivé.
-
Développez Aspect > Axe des abscisses : Product Type, Late Status.
-
Définissez Étiquettes et titre sur Étiquettes uniquement.
-
Développez Aspect > Axe des ordonnées : Sum(Sales).
-
Définissez Étiquettes et titre sur Étiquettes uniquement.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Procédez comme suit :
-
Sous Contenu > Graphiques, faites un clic droit sur BarChart_Simple et cliquez sur Dupliquer.
-
Développez l'élément. Définissez l'Étiquette sur BarChart_Detailed.
-
Pour Condition d'affichage, cliquez sur
.
-
Ajoutez le paramètre suivant :
=vViewChartValues=true() -
Cliquez sur Appliquer.
-
Cliquez sur Modifier les propriétés.
-
Développez Aspect > Présentation.
-
Activez Étiquettes des valeurs.
-
Activez Étiquettes des segments, et assurez-vous que Étiquettes des totaux est activé.
-
Cliquez sur
Styles.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Taille de police de l'Étiquette d'axe : 16 px
-
Taille de police des Étiquettes de valeur : 14 px
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Développez Aspect > Couleurs et légende.
-
Développez Aspect > Axe des abscisses : Product Type, Late Status.
-
Définissez Étiquettes et titre sur Étiquettes uniquement.
-
Développez Aspect > Axe des ordonnées : Sum(Sales).
-
Définissez Étiquettes et titre sur Étiquettes uniquement.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Créez trois visualisations principales qui seront utilisées pour créer un bouton bascule composite dans le conteneur de disposition. Ce bouton bascule permettra aux utilisateurs d'activer et de désactiver les étiquettes de valeur sur le graphique à barres.
Premier élément : Base du bouton bascule
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Bouton.
-
Développez l'élément. Définissez l'Étiquette sur ToggleSwitch_Base.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 16
-
Hauteur (%) : 7
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 83
-
Axe des ordonnées (%) : 90
-
-
Cliquez sur Modifier les propriétés.
-
Développez Actions et navigation.
-
Cliquez sur Ajouter une action.
-
Pour Action, sélectionnez Définir la valeur de la variable.
-
Pour Variable, sélectionnez vViewChartValues.
-
Pour Valeur, cliquez sur
.
-
Ajoutez l'expression suivante :
=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false())) -
Cliquez sur Appliquer.
-
Développez Aspect > Général.
-
Définissez Show Values comme Étiquette.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 2 px.
-
Définissez la couleur de la Bordure sur #000000.
-
Définissez le Rayon d'angle de la Bordure sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : 0,5
-
Couleur de police > Couleur : #000000
-
Options d'arrière-plan > Couleur utilisée : #ffffff
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Deuxième élément : Partie du bouton représentant l'état ACTIVÉ
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Bouton.
-
Développez l'élément. Définissez l'Étiquette sur ToggleSwitch_ON.
-
Pour Condition d'affichage, cliquez sur
.
-
Ajoutez le paramètre suivant :
=vViewChartValues=true() -
Cliquez sur Appliquer.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 4
-
Hauteur (%) : 7
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 95
-
Axe des ordonnées (%) : 90
-
-
Cliquez sur Modifier les propriétés.
-
Développez Actions et navigation.
-
Cliquez sur Ajouter une action.
-
Pour Action, sélectionnez Définir la valeur de la variable.
-
Pour Variable, sélectionnez vViewChartValues.
-
Pour Valeur, cliquez sur
.
-
Ajoutez l'expression suivante :
=false() -
Cliquez sur Appliquer.
-
Développez Aspect > Général.
-
Définissez On comme Étiquette.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 2 px.
-
Définissez la couleur de la Bordure sur #000000.
-
Définissez le Rayon d'angle de la Bordure sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : 0,5
-
Couleur de police > Couleur : #ffffff
-
Options d'arrière-plan > Couleur utilisée : #109600
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Troisième élément : Partie du bouton représentant l'état DÉSACTIVÉ
Procédez comme suit :
-
Sous Contenu > Graphiques, cliquez sur Ajouter. Sélectionnez Bouton.
-
Développez l'élément. Définissez l'Étiquette sur ToggleSwitch_ON.
-
Pour Condition d'affichage, cliquez sur
.
-
Ajoutez le paramètre suivant :
=vViewChartValues=false() -
Cliquez sur Appliquer.
-
Sous Taille, définissez les éléments suivants :
-
Largeur (%) : 4
-
Hauteur (%) : 7
-
-
Sous Position, définissez les éléments suivants :
-
Axe des abscisses (%) : 83
-
Axe des ordonnées (%) : 90
-
-
Cliquez sur Modifier les propriétés.
-
Développez Actions et navigation.
-
Cliquez sur Ajouter une action.
-
Pour Action, sélectionnez Définir la valeur de la variable.
-
Pour Variable, sélectionnez vViewChartValues.
-
Pour Valeur, cliquez sur
.
-
Ajoutez l'expression suivante :
=true() -
Cliquez sur Appliquer.
-
Développez Aspect > Général.
-
Définissez Off comme Étiquette.
-
Développez Aspect > Présentation.
-
Cliquez sur
Styles.
-
Sous Bordure, définissez Contour sur 2 px.
-
Définissez la couleur de la Bordure sur #000000.
-
Définissez le Rayon d'angle de la Bordure sur 0 px.
-
Accédez à l'onglet Graphique. Définissez les propriétés suivantes :
-
Comportement de la disposition : Réactif
-
Taille de police : 0,5
-
Couleur de police > Couleur : #ffffff
-
Options d'arrière-plan > Couleur utilisée : #ff001e
-
-
Cliquez sur
pour quitter le panneau de styles.
-
Cliquez sur la barre supérieure dans le panneau pour revenir au conteneur de disposition.
Quatrième partie : Finalisation de la présentation
Finalisez le conteneur de disposition en ajoutant un titre et une bordure.
Procédez comme suit :
-
Dans le panneau des propriétés, développez Aspect > Général.
-
Définissez le Titre sur Late vs. Non-Late Orders - Sales Impact (Commandes en retard par rapport aux autres - Impact sur les ventes).
-
Développez Aspect > Présentation.
-
Activez Conserver les graphiques à l'intérieur.
-
Cliquez sur
Styles.
-
Définissez les propriétés suivantes pour Bordure :
-
Contour : 2 px
-
Couleur : #7b7a78
-
-
Définissez les propriétés suivantes pour Ombre :
-
Taille Moyenne
-
Couleur : #7b7a78
-
Résultats
Quittez le mode d'édition de feuille. Cliquez sur le bouton bascule pour alterner entre le graphique à barres simple et le graphique à barres détaillé.
Conteneur de disposition avec Afficher les valeurs désactivé

Conteneur de disposition avec Afficher les valeurs activé

Cliquez sur les titres Not Late et Late en haut du graphique. Notez qu'un clic sur ces éléments sélectionne les valeurs correspondantes dans l'application.
Conteneur de disposition avec la sélection Not Late dans le champ Late Status.
