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

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

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

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