Как я это сделал: Динамический анализ с контейнером макета
В этом примере показано, как создавать динамическое, интерактивное содержимое листа с помощью контейнера макета.Контейнер макета поддерживает бессеточный дизайн и визуализации стопкой, что обеспечивает полный контроль над расположением аналитического содержимого. Кроме того, как и в случае с другими объектами-контейнерами, вы можете динамически представлять различную информацию в зависимости от множества условий, таких как переменные и состояния выборок.
В этом примере показано, как можно создать контейнер макета для представления информации из нескольких диаграмм в виде одного объекта. Некоторые общие подходы к дизайну включают:
-
Расположение похожих объектов симметричным образом, использование стилей для различения разных разделов данных.
-
Удаление границ с отдельных объектов внутри контейнера макета, а затем добавление границы вокруг всего объекта по завершении.
-
Условное отображение различных объектов или данных в зависимости от взаимодействия с пользователем — в этом примере, линейчатая диаграмма, в которой пользователь может показывать или скрывать детали.
-
Создание составных элементов, состоящих из нескольких различных объектов, расположенных рядом друг с другом — в этом примере, интерактивная кнопка, имитирующая переключатель включения/выключения.
-
Предоставление пользователям нескольких способов выбора и фильтрации данных, когда им нужно рассмотреть их подробнее.
Конечный результат

Подготовка
Создайте новое приложение и вставьте Пример: скрипт загрузки в новый раздел в Редактор загрузки данных. Затем загрузите данные.
После загрузки данных переключитесь в вид листа.
Пример: скрипт загрузки
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;
Часть 1: Создайте переменную
Сначала создайте переменную. Эта переменная является объектом условий, которые будут добавлены позже. Значения переменной будут изменены во время анализа в результате взаимодействия с объектами-кнопками.
Создайте следующую переменную. Установите Определение на =false().
-
vViewChartValues
Часть 2: Создание контейнера макета
Выполните следующие действия.
-
На панели ресурсов откройте Диаграммы и в разделе Объекты информационной панели перетащите на лист объект Контейнер макета.
-
Измените размер контейнера так, чтобы он составлял 17 на 10 квадратов на сетке листа.
Часть 3: Добавление визуализаций в контейнер макета
Затем добавьте визуализации в контейнер макета.
Выполните следующие действия.
-
Выберите контейнер макета.
-
На панели свойств, в разделе Содержимое > Диаграммы, нажмите Добавить. Выберите Кнопка.
-
Разверните элемент. Установите Label на Button_NotLateTitle.
-
В разделе Размер установите следующее:
-
Ширина (%): 48
-
Высота (%): 9
-
-
В разделе Положение укажите следующее:
-
Ось X (%): 1
-
Ось Y (%): 1
-
-
Нажмите Изменить свойства.
-
Разверните Действия и навигация.
-
Нажмите Добавить действие.
-
Для Действия выберите Выбрать значения в поле.
-
Для Поля выберите Late Status.
-
Для Значения нажмите
.
-
Добавьте следующее:
='Not Late' -
Нажмите Применить.
-
Разверните Appearance > General.
-
Задайте Not Late в качестве Label.
-
Разверните Appearance > Presentation.
-
Щелкните
Styling.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Поведение макета: Адаптивный
-
Размер шрифта: Максимальное значение
-
Цвет шрифта > Цвет: #006580
-
Параметры фона > Используемый цвет: #ffffff
-
-
Щелкните
, чтобы выйти из панели стилей.
-
Нажмите верхнюю полосу на панели, чтобы вернуться к контейнеру макета.
Выполните следующие действия.
-
В разделе Content > Charts нажмите Add. Выберите Button.
-
Разверните элемент. Установите Label на Button_LateTitle.
-
В разделе Размер установите следующее:
-
Ширина (%): 48
-
Высота (%): 9
-
-
В разделе Положение установите следующее:
-
Ось X (%): 51
-
Ось Y (%): 1
-
-
Нажмите Изменить свойства.
-
Разверните Действия и навигация.
-
Нажмите Добавить действие.
-
Для Действия выберите Выбрать значения в поле.
-
Для Поля выберите Late Status.
-
Для Значения нажмите
.
-
Добавьте следующее:
='Late' -
Нажмите Применить.
-
Разверните Appearance > General.
-
Задайте Late в качестве Label.
-
Разверните Appearance > Presentation.
-
Щелкните
Styling.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Поведение макета: Адаптивный
-
Размер шрифта: Максимальное значение
-
Цвет шрифта > Цвет: #87205d
-
Параметры фона > Используемый цвет: #ffffff
-
-
Щелкните
, чтобы выйти из панели стилей.
-
Нажмите верхнюю полосу на панели, чтобы вернуться к контейнеру макета.
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы нажмите Добавить. Выберите Датчик.
-
Разверните элемент. Установите Label на Gauge_NotLate.
-
В разделе Размер установите следующее:
-
Ширина (%): 48
-
Высота (%): 15
-
-
В разделе Положение установите следующие значения:
-
Ось X (%): 1
-
Ось Y (%): 11
-
-
Нажмите Изменить свойства.
-
Добавьте Sum(Sales) как меру.
-
На панели свойств в разделе Данные > Фильтры нажмите Добавить.
-
Выберите Late Status. Разверните фильтр.
-
Сохраните тип фильтра по умолчанию Значения и установите флажок Not Late. Это фильтрует данные визуализации только до записей, которые содержат значение Late Status, равное Not Late.
-
Разверните Вид > Общие.
-
Установите Показывать заголовки в Выкл..
-
Разверните Appearance > Presentation.
-
В разделе Range limits установите для Max следующее значение:
=Sum({1} Sales) -
Измените конфигурацию диаграммы с Radial на Bar.
-
Измените Orientation с Auto на Custom и убедитесь, что выбрано Horizontal.
-
Отключите Use library и установите Color на #006580.
-
Нажмите
Styling.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите цвет для метки значения на #ffffff.
-
Нажмите
, чтобы выйти из панели стилей.
-
Разверните Вид > Ось меры: Sum(Sales).
-
Установите для Меток и заголовка значение Нет.
-
Нажмите верхнюю полосу на панели, чтобы вернуться в контейнер макета.
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы нажмите Добавить. Выберите Датчик.
-
Разверните элемент. Установите Label на Gauge_Late.
-
В разделе Размер установите следующее:
-
Ширина (%): 48
-
Высота (%): 15
-
-
В разделе Положение установите следующие значения:
-
Ось X (%): 51
-
Ось Y (%): 11
-
-
Нажмите Изменить свойства.
-
Добавьте Sum(Sales) как меру.
-
На панели свойств в разделе Данные > Фильтры нажмите Добавить.
-
Выберите Late Status. Разверните фильтр.
-
Сохраните тип фильтра по умолчанию Значения и установите флажок Late. Это фильтрует данные визуализации только до записей, которые содержат значение Late Status, равное Late.
-
Разверните Вид > Общие.
-
Установите Показывать заголовки в Выкл..
-
Разверните Appearance > Presentation.
-
В разделе Range limits установите для Max следующее значение:
=Sum({1} Sales) -
Измените конфигурацию диаграммы с Radial на Bar.
-
Измените Orientation с Auto на Custom и убедитесь, что выбрано Horizontal.
-
Отключите Use library и установите Color на #87205d.
-
Нажмите
Styling.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите цвет для метки значения на #ffffff.
-
Нажмите
, чтобы выйти из панели стилей.
-
Разверните Вид > Ось меры: Sum(Sales).
-
Установите для Меток и заголовка значение Нет.
-
Нажмите верхнюю полосу на панели, чтобы вернуться в контейнер макета.
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы нажмите Добавить. Выберите Ключевой показатель эффективности.
-
Разверните элемент. Установите Label на KPI_NotLate.
-
В разделе Размер установите следующее:
-
Ширина (%): 48
-
Высота (%): 9
-
-
В разделе Положение укажите следующее:
-
Ось X (%): 1
-
Ось Y (%): 27
-
-
Нажмите Изменить свойства.
-
Добавьте Sum(Sales) как меру.
-
В свойствах меры установите для Форматирование чисел значение Денежный.
-
Измените Шаблон формата на:
$ #,##0.00;-$ #,##0.00 -
На панели свойств в разделе Данные > Фильтры нажмите Добавить.
-
Выберите Late Status. Разверните фильтр.
-
Сохраните тип фильтра по умолчанию Значения и установите флажок Not Late. Это фильтрует данные визуализации только до записей, которые содержат значение Late Status, равное Not Late.
-
Разверните Вид > Общие.
-
Установите Показывать заголовки в Выкл..
-
Разверните Вид > Представление.
-
Щелкните
Styling.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Поведение макета: Адаптивный
-
Размер шрифта: Максимальное значение
-
Отключите Показать заголовок первого ключевого показателя эффективности
-
-
Нажмите
, чтобы выйти из панели стилей.
-
Разверните Внешний вид > Цвет.
-
Отключите Цвета библиотеки. Установите цвет на #006580.
-
Нажмите верхнюю полосу на панели, чтобы вернуться к контейнеру макета.
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы нажмите Добавить. Выберите Ключевой показатель эффективности.
-
Разверните элемент. Установите Label на KPI_Late.
-
В разделе Размер установите следующее:
-
Ширина (%): 48
-
Высота (%): 9
-
-
В разделе Положение установите следующее:
-
Ось X (%): 51
-
Ось Y (%): 27
-
-
Нажмите Изменить свойства.
-
Добавьте Sum(Sales) как меру.
-
В свойствах меры установите для Форматирование чисел значение Денежный.
-
Измените Шаблон формата на:
$ #,##0.00;-$ #,##0.00 -
На панели свойств в разделе Данные > Фильтры нажмите Добавить.
-
Выберите Late Status. Разверните фильтр.
-
Сохраните тип фильтра по умолчанию Значения и установите флажок Late. Это фильтрует данные визуализации только до записей, которые содержат значение Late Status, равное Late.
-
Разверните Вид > Общие.
-
Установите Показывать заголовки в Выкл..
-
Разверните Вид > Представление.
-
Щелкните
Styling.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Поведение макета: Адаптивный
-
Размер шрифта: Максимальное значение
-
Отключите Показать заголовок первого ключевого показателя эффективности
-
-
Нажмите
, чтобы выйти из панели стилей.
-
Разверните Внешний вид > Цвет.
-
Отключите Цвета библиотеки. Установите цвет на #87205d.
-
Нажмите на верхнюю полосу на панели, чтобы вернуться к контейнеру макета.
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы нажмите Добавить. Выберите линейчатую диаграмму.
-
Развернуть элемент. Задайте для Label значение BarChart_Simple.
-
Для Show condition нажмите
.
-
Добавьте следующее:
=vViewChartValues=false() -
Нажмите Применить.
-
В разделе Размер задайте следующее:
-
Ширина (%): 81
-
Высота (%): 62
-
-
В разделе Положение установите следующие значения:
-
Ось X (%): 1
-
Ось Y (%): 37
-
-
Нажмите Изменить свойства.
-
Добавьте Product Type как измерение.
-
Добавьте еще одно измерение: Late Status.
Product Type теперь должно быть указано как Группа, а Late Status — как Столбцы.
-
Добавьте Sum(Sales) как меру.
-
В свойствах меры установите для Форматирование чисел значение Денежный.
-
Измените Шаблон формата на:
$ #,##0.00;-$ #,##0.00 -
Разверните Вид > Общие.
-
Установите Показывать заголовки в Выкл..
-
Разверните Вид > Представление.
-
Переключитесь с группированного представления на многослойное.
-
Установите Шаг сетки в Пользовательский. В раскрывающемся списке выберите Без линий.
-
Нажмите
Стилизация.
-
В разделе Граница установите Контур на 0 пикс.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Метка оси размер шрифта: 16 пикс.
-
-
Нажмите
чтобы выйти из панели стилизации.
-
Разверните Вид > Цвета и легенда.
-
Установите Цвета на Пользовательский > По выражению. Используйте следующее выражение:
=if([Late Status]='Not Late','#006580', if([Late Status]='Late','#87205d')) -
Задайте параметру Показать легенду значение Выкл.
-
Разверните Вид > Ось X: Product Type, Late Status.
-
Установите для параметра Метки и заголовок значение Только метки.
-
Разверните элемент Appearance > ось Y: Sum(Sales).
-
Установите для параметра Метки и заголовок значение Только метки.
-
Нажмите верхнюю полосу на панели, чтобы вернуться к контейнеру макета.
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы щелкните правой кнопкой мыши BarChart_Simple и нажмите Дублировать.
-
Развернуть элемент. Задайте для Label значение BarChart_Detailed.
-
Для Show condition нажмите
.
-
Добавьте следующее:
=vViewChartValues=true() -
Нажмите Применить.
-
Нажмите Изменить свойства.
-
Разверните Вид > Представление.
-
Включите Метки значений.
-
Включите Метки сегментов и убедитесь, что Итоговые метки включены.
-
Нажмите
Стили.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Размер шрифта метки оси: 16 пикс.
-
Размер шрифта меток значений: 14 px
-
-
Щелкните
, чтобы выйти из панели стилизации.
-
Разверните Вид > Цвета и легенда.
-
Разверните элемент Appearance (Внешний вид) > Ось X: Product Type, Late Status.
-
Установите для параметра Метки и заголовок значение Только метки.
-
Разверните элемент Appearance > ось Y: Sum(Sales).
-
Установите для параметра Метки и заголовок значение Только метки.
-
Щелкните верхнюю полосу на панели, чтобы вернуться в контейнер макета.
Создайте три основные визуализации, которые будут использоваться для создания составной кнопки-переключателя в контейнере макета. Этот переключатель позволит пользователям включать и отключать метки значений на линейчатой диаграмме.
Элемент 1. Основание тумблера
Выполните следующие действия.
-
В разделе Содержимое > Диаграммы нажмите кнопку Добавить. Выберите Button.
-
Разверните элемент. Установите Label на ToggleSwitch_Base.
-
В разделе Size установите следующие значения:
-
Ширина (%): 16
-
Высота (%): 7
-
-
В разделе Положение задайте следующие значения:
-
Ось X (%): 83
-
Ось Y (%): 90
-
-
Щелкните Изменить свойства.
-
Разверните Действия и навигация.
-
Нажмите Добавить действие.
-
Для Действие выберите Задать значение переменной.
-
Для Переменная выберите vViewChartValues.
-
Для Value щелкните
.
-
Добавьте следующее выражение:
=if(vViewChartValues=false(),true(),if(vViewChartValues=true(),false())) -
Нажмите Применить.
-
Разверните Appearance > General.
-
Задайте Show Values в качестве Label.
-
Разверните Appearance > Presentation.
-
Щелкните
Styling.
-
В разделе Border установите для параметра Outline значение 2 px.
-
Установите для цвета Border значение #000000.
-
Установите для параметра Corner radius для Border значение 0 px.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Layout behavior: Responsive
-
Размер шрифта: 0.5
-
Цвет шрифта > Цвет: #000000
-
Параметры фона > Используемый цвет: #ffffff
-
-
Щелкните
, чтобы выйти из панели стилей.
-
Щелкните верхнюю полосу на панели, чтобы вернуться в контейнер макета.
Элемент 2: Часть кнопки, представляющая состояние ВКЛ.
Выполните следующие действия.
-
В разделе Content > Charts нажмите кнопку Add. Выберите Button.
-
Разверните элемент. Задайте для Label значение ToggleSwitch_ON.
-
Для Show condition нажмите
.
-
Добавьте следующее:
=vViewChartValues=true() -
Нажмите Применить.
-
В разделе Размер задайте следующие значения:
-
Ширина (%): 4
-
Высота (%): 7
-
-
В разделе Position установите следующие значения:
-
Ось X (%): 95
-
Ось Y (%): 90
-
-
Щелкните Изменить свойства.
-
Разверните Действия и навигация.
-
Нажмите Добавить действие.
-
Для Действие выберите Задать значение переменной.
-
Для Переменная выберите vViewChartValues.
-
Для Value щелкните
.
-
Добавьте следующее выражение:
=false() -
Нажмите Применить.
-
Разверните Appearance > General.
-
Задайте On в качестве Label.
-
Разверните Appearance > Presentation.
-
Щелкните
Styling.
-
В разделе Border установите для параметра Outline значение 2 px.
-
Установите для цвета Border значение #000000.
-
Установите для параметра Corner radius для Border значение 0 px.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Layout behavior: Responsive
-
Размер шрифта: 0.5
-
Цвет шрифта > Цвет: #ffffff
-
Параметры фона > Используемый цвет: #109600
-
-
Щелкните
, чтобы выйти из панели стилей.
-
Щелкните верхнюю полосу на панели, чтобы вернуться в макет контейнера.
Элемент 3: часть кнопки, представляющая состояние ВЫКЛ.
Выполните следующие действия.
-
В разделе Content > Charts нажмите Add. Выберите Button.
-
Разверните элемент. Задайте для Label значение ToggleSwitch_ON.
-
Для Show condition нажмите
.
-
Добавьте следующее:
=vViewChartValues=false() -
Нажмите Применить.
-
В разделе Размер задайте следующие значения:
-
Ширина (%): 4
-
Высота (%): 7
-
-
В разделе Положение задайте следующие значения:
-
Ось X (%): 83
-
Ось Y (%): 90
-
-
Щелкните Изменить свойства.
-
Разверните Действия и навигация.
-
Нажмите Добавить действие.
-
Для Действие выберите Задать значение переменной.
-
Для Переменная выберите vViewChartValues.
-
Для Value щелкните
.
-
Добавьте следующее выражение:
=true() -
Нажмите Применить.
-
Разверните Appearance > General.
-
Задайте Off в качестве Label.
-
Разверните Appearance > Presentation.
-
Щелкните
Styling.
-
В разделе Border установите для параметра Outline значение 2 px.
-
Установите для цвета Border значение #000000.
-
Установите для параметра Corner radius для Border значение 0 px.
-
Перейдите на вкладку Диаграммы. Установите следующие свойства.
-
Layout behavior: Responsive
-
Размер шрифта: 0.5
-
Цвет шрифта > Цвет: #ffffff
-
Параметры фона > Используемый цвет: #ff001e
-
-
Щелкните
, чтобы выйти из панели стилей.
-
Щелкните верхнюю полосу на панели, чтобы вернуться в макет контейнера.
Часть 4. Завершение презентации
Завершите работу с макетом контейнера, добавив заголовок и границу.
Выполните следующие действия.
-
На панели свойств разверните Вид > Общие.
-
Задайте для заголовка значение Заказы с опозданием и без. Влияние на продажи заказов с опозданием и без.
-
Разверните Appearance > Presentation.
-
Turn on Keep charts inside.
-
Щелкните
Styling.
-
Set the following properties for Border:
-
Контур: 2 px
-
Цвет: #7b7a78
-
-
Установите следующие свойства для Тени:
-
Размер Средний
-
Цвет: #7b7a78
-
Результаты
Выйдите из режима редактирования листа. Нажмите кнопку переключателя, чтобы переключаться между простой и подробной линейчатой диаграммой.
Контейнер компоновки с Показать значения отключенным

Контейнер макета с Показать значения включенным

Нажмите на заголовки Not Late и Late в верхней части диаграммы. Обратите внимание, что при нажатии на эти элементы выбираются соответствующие значения в приложении.
Контейнер макета с выбранным Not Late в поле Late Status.
