Jak to zrobiłem: Dynamiczna analiza z kontenerem układu
Ten przykład pokazuje, jak tworzyć dynamiczną, interaktywną zawartość arkusza za pomocą kontenera układu.Kontener układu obsługuje projektowanie bez siatki i skumulowane wizualizacje, umożliwiając szeroką kontrolę nad rozmieszczeniem zawartości analitycznej. Dodatkowo, podobnie jak w przypadku innych obiektów kontenera, można dynamicznie prezentować różne informacje w zależności od wielu warunków, takich jak stany zmiennych i stany zaznaczenia.
Ten przykład pokazuje, jak zbudować kontener układu, aby prezentować informacje z wielu wykresów jako pojedynczy obiekt. Niektóre ogólne podejścia do projektowania obejmują:
-
Rozmieszczanie podobnych obiektów w sposób symetryczny, używając stylizacji do rozróżniania różnych sekcji danych.
-
Usuwanie obramowań z pojedynczych obiektów wewnątrz kontenera układu, a następnie dodawanie obramowania wokół całego obiektu po zakończeniu.
-
Warunkowe wyświetlanie różnych obiektów lub danych w zależności od interakcji użytkownika — w tym przykładzie wykres słupkowy, w którym użytkownik może pokazywać lub ukrywać szczegóły.
-
Tworzenie elementów złożonych składających się z wielu różnych obiektów umieszczonych obok siebie — w tym przykładzie interaktywny przycisk, który imituje przełącznik włącz/wyłącz.
-
Umożliwianie użytkownikom wielu sposobów wybierania i filtrowania danych, gdy potrzebują przyjrzeć się im bliżej.
Wynik końcowy

Przygotowania
Utwórz nową aplikację i wklej Przykład skryptu ładowania do nowej sekcji w Edytor ładowania danych. Następnie załaduj dane.
Po załadowaniu danych przełącz się do widoku arkusza.
Przykład skryptu ładowania
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;
Część 1: Utwórz zmienną
Najpierw utwórz zmienną. Ta zmienna jest przedmiotem warunków, które zostaną dodane później. Wartości zmiennej zostaną zmienione podczas analizy poprzez interakcje z obiektami przycisków.
Utwórz następującą zmienną. Ustaw Definicję na =false().
-
vViewChartValues
Część 2: Utwórz kontener układu
Wykonaj następujące czynności:
-
W panelu zasobów otwórz
Obiekty niestandardowe > Dashboard bundle i przeciągnij Layout container do arkusza.
-
Zmień rozmiar kontenera tak, aby miał 17 na 10 kwadratów na siatce arkusza.
Część 3: Dodaj wizualizacje do kontenera układu
Następnie dodaj wizualizacje do kontenera układu.
Wykonaj następujące czynności:
-
Wybierz kontener układu.
-
W panelu właściwości, w sekcji Zawartość > Wykresy, kliknij Dodaj. Wybierz Przycisk.
-
Rozwiń element. Ustaw Etykieta na Button_NotLateTitle.
-
W sekcji Rozmiar, ustaw następujące wartości:
-
Szerokość (%): 48
-
Wysokość (%): 9
-
-
W obszarze Pozycja ustaw następujące:
-
Oś X (%): 1
-
Oś Y (%): 1
-
-
Kliknij Edytuj właściwości.
-
Rozwiń Akcje i nawigacja.
-
Kliknij pozycję Dodaj działanie.
-
Dla Akcji wybierz Wybierz wartości w polu.
-
Dla Pola wybierz Late Status.
-
Dla Wartości kliknij
.
-
Dodaj następujące:
='Not Late' -
Kliknij przycisk Zastosuj.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Not Late jako Etykieta.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Stylizacja.
-
W obszarze Obramowanie ustaw Obrys na 0 px.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywny
-
Rozmiar czcionki: Wartość maksymalna
-
Kolor czcionki > Kolor: #006580
-
Opcje tła > Użyty kolor: #ffffff
-
-
Kliknij
aby zamknąć panel stylów.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Wykonaj następujące czynności:
-
Pod Zawartość > Wykresy, kliknij Dodaj. Wybierz Przycisk.
-
Rozwiń element. Ustaw Etykietę na Button_LateTitle.
-
W sekcji Rozmiar ustaw następujące wartości:
-
Szerokość (%): 48
-
Wysokość (%): 9
-
-
W obszarze Pozycja ustaw następujące wartości:
-
Oś X (%): 51
-
Oś Y (%): 1
-
-
Kliknij Edytuj właściwości.
-
Rozwiń Akcje i nawigacja.
-
Kliknij pozycję Dodaj działanie.
-
Dla Akcji wybierz Wybierz wartości w polu.
-
Dla Pola wybierz Late Status.
-
Dla Wartości kliknij
.
-
Dodaj następujące:
='Late' -
Kliknij przycisk Zastosuj.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Late jako Etykieta.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Stylizacja.
-
W sekcji Ramka ustaw Obrys na 0 px.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywne
-
Rozmiar czcionki: Wartość maksymalna
-
Kolor czcionki > Kolor: #87205d
-
Opcje tła > Użyty kolor: #ffffff
-
-
Kliknij
aby zamknąć panel stylizacji.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Wykonaj następujące czynności:
-
W obszarze Zawartość > Wykresy, kliknij Dodaj. Wybierz Miernik.
-
Rozwiń element. Ustaw Etykieta na Gauge_NotLate.
-
W sekcji Rozmiar ustaw następujące:
-
Szerokość (%): 48
-
Wysokość (%): 15
-
-
W sekcji Pozycja ustaw następujące:
-
Oś X (%): 1
-
Oś Y (%): 11
-
-
Kliknij Edytuj właściwości.
-
Dodaj Sum(Sales) jako miarę.
-
W panelu właściwości, w obszarze Dane > Filtry, kliknij Dodaj.
-
Wybierz Late Status. Rozwiń filtr.
-
Zachowaj domyślny typ filtru Wartości i zaznacz pole wyboru Not Late. Filtruje to dane wizualizacji tylko do rekordów, które zawierają wartość Late Status równą Not Late.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Pokaż tytuły na Wyłączone.
-
Rozwiń Wygląd > Prezentacja.
-
W obszarze Limity zakresu ustaw Maks. na następujące:
=Sum({1} Sales) -
Zmień konfigurację wykresu z Radialny na Słupkowy.
-
Zmień Orientację z Automatyczna na Niestandardowa i upewnij się, że wybrano Pozioma.
-
Wyłącz Użyj biblioteki i ustaw Kolor na #006580.
-
Kliknij
Stylizacja.
-
W sekcji Obramowanie ustaw Kontur na 0 px.
-
Przejdź do karty Wykres. Ustaw kolor dla etykiety wartości na #ffffff.
-
Kliknij
, aby wyjść z panelu stylizacji.
-
Rozwiń Wygląd > Oś miary: Sum(Sales).
-
Ustaw Etykiety i tytuł na Brak.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Wykonaj następujące czynności:
-
W sekcji Zawartość > Wykresy kliknij Dodaj. Wybierz Wykres zegarowy.
-
Rozwiń element. Ustaw Etykieta na Gauge_Late.
-
W sekcji Rozmiar ustaw następujące parametry:
-
Szerokość (%): 48
-
Wysokość (%): 15
-
-
W sekcji Pozycja ustaw następujące parametry:
-
Oś X (%): 51
-
Oś Y (%): 11
-
-
Kliknij Edytuj właściwości.
-
Dodaj Sum(Sales) jako miarę.
-
W panelu właściwości, w obszarze Dane > Filtry, kliknij Dodaj.
-
Wybierz Late Status. Rozwiń filtr.
-
Zachowaj domyślny typ filtru Wartości i zaznacz pole wyboru Late. To filtruje dane wizualizacji tylko do rekordów, które zawierają wartość Late Status równą Late.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Pokaż tytuły na Wyłączone.
-
Rozwiń Wygląd > Prezentacja.
-
W sekcji Limity zakresu ustaw Maks. na następujące:
=Sum({1} Sales) -
Zmień konfigurację wykresu z Radial na Bar.
-
Zmień Orientation z Auto na Custom i upewnij się, że wybrano Horizontal.
-
Wyłącz Use library i ustaw Color na #87205d.
-
Kliknij
Styling.
-
W sekcji Border ustaw Outline na 0 px.
-
Przejdź do karty Wykres. Ustaw kolor dla etykiety wartości na #ffffff.
-
Kliknij
aby wyjść z panelu stylizacji.
-
Rozwiń Wygląd > Oś miary: Sum(Sales).
-
Ustaw Etykiety i tytuł na Brak.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Wykonaj następujące czynności:
-
W obszarze Zawartość > Wykresy, kliknij Dodaj. Wybierz Wskaźnik KPI.
-
Rozwiń element. Ustaw Etykieta na KPI_NotLate.
-
W obszarze Rozmiar, ustaw następujące:
-
Szerokość (%): 48
-
Wysokość (%): 9
-
-
W obszarze Pozycja, ustaw następujące:
-
Oś X (%): 1
-
Oś Y (%): 27
-
-
Kliknij Edytuj właściwości.
-
Dodaj Sum(Sales) jako miarę.
-
We właściwościach miary ustaw Formatowanie liczb na Waluta.
-
Zmień Wzorzec formatu na:
$ #,##0.00;-$ #,##0.00 -
W panelu właściwości, w obszarze Dane > Filtry, kliknij Dodaj.
-
Wybierz Late Status. Rozwiń filtr.
-
Zachowaj domyślny typ filtru Wartości i zaznacz Not Late pole wyboru. Spowoduje to filtrowanie danych wizualizacji tylko do rekordów zawierających Late Status wartość Not Late.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Pokaż tytuły na Wyłączone.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Stylizacja.
-
W obszarze Obramowanie ustaw Kontur na 0 px.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywne
-
Rozmiar czcionki: Wartość maksymalna
-
Wyłącz Pokaż pierwszy tytuł wskaźnika KPI
-
-
Kliknij
, aby zamknąć panel stylów.
-
Rozwiń Wygląd > Kolor.
-
Wyłącz Kolory z biblioteki. Ustaw kolor na #006580.
-
Kliknij górny słupek w panelu, aby powrócić do kontenera układu.
Wykonaj następujące czynności:
-
W obszarze Zawartość > Wykresy kliknij Dodaj. Wybierz wskaźnik KPI.
-
Rozwiń element. Ustaw Etykietę na KPI_Late.
-
W obszarze Rozmiar ustaw następujące wartości:
-
Szerokość (%): 48
-
Wysokość (%): 9
-
-
W obszarze Pozycja ustaw następujące wartości:
-
Oś X (%): 51
-
Oś Y (%): 27
-
-
Kliknij Edytuj właściwości.
-
Dodaj Sum(Sales) jako miarę.
-
We właściwościach miary ustaw Formatowanie liczb na Waluta.
-
Zmień Wzorzec formatu na:
$ #,##0.00;-$ #,##0.00 -
W panelu właściwości, w obszarze Dane > Filtry, kliknij Dodaj.
-
Wybierz Late Status. Rozwiń filtr.
-
Zachowaj domyślny typ filtru Wartości i zaznacz pole wyboru Late. Spowoduje to filtrowanie danych wizualizacji do rekordów zawierających tylko wartość Late Status równą Late.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Pokaż tytuły na Wyłączone.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Styl.
-
W sekcji Ramka ustaw Obrys na 0 px.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywne
-
Rozmiar czcionki: Wartość maksymalna
-
Wyłącz Pokaż tytuł pierwszego wskaźnika KPI
-
-
Kliknij
aby zamknąć panel stylizacji.
-
Rozwiń Wygląd > Kolor.
-
Wyłącz Kolory z biblioteki. Ustaw kolor na #87205d.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Wykonaj następujące czynności:
-
W sekcji Zawartość > Wykresy kliknij Dodaj. Wybierz Wykres słupkowy.
-
Rozwiń element. Ustaw Etykieta na BarChart_Simple.
-
Dla Warunek wyświetlania, kliknij
.
-
Dodaj następujące:
=vViewChartValues=false() -
Kliknij przycisk Zastosuj.
-
W obszarze Rozmiar, ustaw następujące:
-
Szerokość (%): 81
-
Wysokość (%): 62
-
-
W obszarze Pozycja ustaw następujące wartości:
-
Oś X (%): 1
-
Oś Y (%): 37
-
-
Kliknij Edytuj właściwości.
-
Dodaj Product Type jako wymiar.
-
Dodaj kolejny wymiar: Late Status.
Product Type powinien być teraz wymieniony jako Grupa, a Late Status jako Słupki.
-
Dodaj Sum(Sales) jako miarę.
-
We właściwościach miary ustaw Formatowanie liczb na Waluta.
-
Zmień Wzorzec formatu na:
$ #,##0.00;-$ #,##0.00 -
Rozwiń Wygląd > Ogólne.
-
Ustaw Pokaż tytuły na Wyłączone.
-
Rozwiń Wygląd > Prezentacja.
-
Przełącz z prezentacji Grupowej na Ułożoną w stos.
-
Ustaw Odstępy między liniami siatki na Niestandardowe. Z listy rozwijanej wybierz Brak linii.
-
Kliknij
Styl.
-
W sekcji Obramowanie, ustaw Kontur na 0 pikseli.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Etykieta osi rozmiar czcionki: 16 px
-
-
Kliknij
aby zamknąć panel stylów.
-
Rozwiń Wygląd > Kolory i legenda.
-
Ustaw Kolory na Niestandardowe > Wg wyrażenia. Użyj poniższego wyrażenia:
=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d')) -
Zmień ustawienie opcji Pokaż legendę na wartość Wył.
-
Rozwiń Wygląd > Oś X: Product Type, Late Status.
-
Ustaw Etykiety i tytuł na Tylko etykiety.
-
Rozwiń Wygląd > Oś Y: Sum(Sales).
-
Ustaw Etykiety i tytuł na Tylko etykiety.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Wykonaj następujące czynności:
-
W obszarze Zawartość > Wykresy kliknij prawym przyciskiem myszy BarChart_Simple i kliknij Duplikuj.
-
Rozwiń element. Ustaw Etykieta na BarChart_Detailed.
-
Dla Warunek wyświetlania, kliknij
.
-
Dodaj następujące:
=vViewChartValues=true() -
Kliknij przycisk Zastosuj.
-
Kliknij Edytuj właściwości.
-
Rozwiń Wygląd > Prezentacja.
-
Włącz Etykiety wartości.
-
Włącz Etykiety segmentów i upewnij się, że Etykiety sumy są włączone.
-
Kliknij
Stylizacja.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Etykieta osi rozmiar czcionki: 16 px
-
Rozmiar czcionki etykiet wartości: 14 px
-
-
Kliknij
, aby zamknąć panel stylizacji.
-
Rozwiń Wygląd > Kolory i legenda.
-
Rozwiń Wygląd > Oś X: Product Type, Late Status.
-
Ustaw Etykiety i tytuł na Tylko etykiety.
-
Rozwiń Wygląd > Oś Y: Sum(Sales).
-
Ustaw Etykiety i tytuł na Tylko etykiety.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Utwórz trzy wizualizacje główne, które zostaną użyte do zbudowania złożonego przycisku przełącznika w kontenerze układu. Ten przełącznik umożliwi użytkownikom włączanie i wyłączanie etykiet wartości na wykresie słupkowym.
Element 1: Podstawa przełącznika
Wykonaj następujące czynności:
-
W obszarze Zawartość > Wykresy kliknij Dodaj. Wybierz Przycisk.
-
Rozwiń element. Ustaw Etykieta na ToggleSwitch_Base.
-
W sekcji Rozmiar ustaw następujące wartości:
-
Szerokość (%): 16
-
Wysokość (%): 7
-
-
W sekcji Pozycja ustaw następujące wartości:
-
Oś X (%): 83
-
Oś Y (%): 90
-
-
Kliknij Edytuj właściwości.
-
Rozwiń Akcje i nawigacja.
-
Kliknij pozycję Dodaj działanie.
-
Dla Akcji wybierz Ustaw wartość zmiennej.
-
Dla Zmiennej wybierz vViewChartValues.
-
Dla Wartości kliknij
.
-
Dodaj następujące wyrażenie:
=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false())) -
Kliknij przycisk Zastosuj.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Show Values jako Etykietę.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Stylizacja.
-
W sekcji Obramowanie ustaw Kontur na 2 px.
-
Ustaw kolor Obramowania na #000000.
-
Ustaw Promień narożnika dla Obramowania na 0 px.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywne
-
Rozmiar czcionki: 0.5
-
Kolor czcionki > Kolor: #000000
-
Opcje tła > Użyty kolor: #ffffff
-
-
Kliknij
, aby zamknąć panel stylów.
-
Kliknij górny słupek w panelu, aby powrócić do kontenera układu.
Element 2: Część przycisku reprezentująca stan WŁ.
Wykonaj następujące czynności:
-
W sekcji Zawartość > Wykresy kliknij Dodaj. Wybierz Przycisk.
-
Rozwiń element. Ustaw Etykietę na ToggleSwitch_ON.
-
Dla Warunku wyświetlania kliknij
.
-
Dodaj następujące:
=vViewChartValues=true() -
Kliknij przycisk Zastosuj.
-
W obszarze Rozmiar ustaw następujące:
-
Szerokość (%): 4
-
Wysokość (%): 7
-
-
W obszarze Pozycja ustaw następujące wartości:
-
Oś X (%): 95
-
Oś Y (%): 90
-
-
Kliknij Edytuj właściwości.
-
Rozwiń Akcje i nawigacja.
-
Kliknij pozycję Dodaj działanie.
-
Dla Akcja wybierz Ustaw wartość zmiennej.
-
Dla Zmienna wybierz vViewChartValues.
-
Dla Wartość kliknij
.
-
Dodaj następujące wyrażenie:
=false() -
Kliknij przycisk Zastosuj.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw On jako Etykieta.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Stylizacja.
-
W obszarze Obramowanie ustaw Kontur na 2 px.
-
Ustaw kolor ramki na #000000.
-
Ustaw promień narożnika dla ramki na 0 px.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywne
-
Rozmiar czcionki: 0.5
-
Kolor czcionki > Kolor: #ffffff
-
Opcje tła > Użyty kolor: #109600
-
-
Kliknij
, aby zamknąć panel stylizacji.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Element 3: Część przycisku reprezentująca stan WYŁ.
Wykonaj następujące czynności:
-
W sekcji Zawartość > Wykresy, kliknij Dodaj. Wybierz Button.
-
Rozwiń element. Ustaw Label na ToggleSwitch_ON.
-
Dla Show condition, kliknij
.
-
Dodaj następujące:
=vViewChartValues=false() -
Kliknij przycisk Zastosuj.
-
W obszarze Rozmiar ustaw następujące:
-
Szerokość (%): 4
-
Wysokość (%): 7
-
-
W obszarze Pozycja ustaw następujące:
-
Oś X (%): 83
-
Oś Y (%): 90
-
-
Kliknij Edytuj właściwości.
-
Rozwiń Akcje i nawigacja.
-
Kliknij pozycję Dodaj działanie.
-
Dla Akcja wybierz Ustaw wartość zmiennej.
-
Dla Zmienna wybierz vViewChartValues.
-
Dla Wartości, kliknij
.
-
Dodaj następujące wyrażenie:
=true() -
Kliknij przycisk Zastosuj.
-
Rozwiń Wygląd > Ogólne.
-
Ustaw Off jako Etykietę.
-
Rozwiń Wygląd > Prezentacja.
-
Kliknij
Styl.
-
W obszarze Obramowanie ustaw Kontur na 2 piksele.
-
Ustaw kolor Obramowanie na #000000.
-
Ustaw Promień narożnika dla Obramowanie na 0 pikseli.
-
Przejdź do karty Wykres. Ustaw następujące właściwości:
-
Zachowanie układu: Responsywne
-
Rozmiar czcionki: 0.5
-
Kolor czcionki > Kolor: #ffffff
-
Opcje tła > Użyty kolor: #ff001e
-
-
Kliknij
aby zamknąć panel stylów.
-
Kliknij górny słupek w panelu, aby wrócić do kontenera układu.
Część 4: Finalizowanie prezentacji
Sfinalizuj kontener układu, dodając tytuł i obramowanie.
Wykonaj następujące czynności:
-
Na panelu właściwości rozwiń Wygląd > Ogólne.
-
Ustaw tytuł na Zamówienia opóźnione a Zamówienia nieopóźnione – wpływ na sprzedaż.
-
Rozwiń Wygląd > Prezentacja.
-
Włącz Zachowaj wykresy wewnątrz.
-
Kliknij
Stylizacja.
-
Ustaw następujące właściwości dla Ramka:
-
Obrys: 2 px
-
Kolor: #7b7a78
-
-
Ustaw następujące właściwości dla Cienia:
-
Średni rozmiar
-
Kolor: #7b7a78
-
Wyniki
Wyjdź z trybu edycji arkusza. Kliknij przycisk przełącznika, aby przełączać się między prostym a szczegółowym wykresem słupkowym.
Kontener układu z Pokaż wartości wyłączone

Kontener układu z Pokaż wartości włączone

Kliknij tytuły Not Late i Late u góry wykresu. Zauważ, że kliknięcie tych elementów powoduje wybranie odpowiednich wartości w aplikacji.
Kontener układu z zaznaczeniem Not Late w polu Late Status.
