Построение сложной диаграммы

В этом уроке демонстрируется, как использовать смешанную диаграмму для сочетания двух диаграмм: одну для отображения данных и другую для отображения трендовых строк для этих данных. Мы будем использовать данные о влажности и температуре, получаемые от сенсора. Вопрос специфики связи сенсора с сервером не рассматривается в этом уроке, мы предполагаем, что оно уже находится в режиме online, а система видит его как устройство.

В конце этого урока мы получим виджет с диаграммой температуры и влажности с трендовыми строками:

Перед тем, как приступить к созданию виджета, найдите устройство, которое необходимо для мониторинга в системном дереве (). Перетащите узел устройства на узел Виджеты ():

Во всплывающем меню выберите действие Создать виджет (). Откроется диалоговое окно свойства виджета. Установите Имя виджета как tchart, а Описание виджета как Temperature Chart и кликните OK.

Это запустит редактор виджетов в пустом шаблоне виджета. Если перетащить устройство в узел Виджеты, наша диаграмма будет доступна для каждого контекста устройств.

Перетащите компонент Смешанная XY диаграмма из палитры компонентов в Корневую панель виджета. Это добавит новый компонент диаграммы в шаблон виджета. Включите Горизонтальное и Вертикальное заполнение для диаграммы, нажав кнопки в инструментальной панели.

Cмешанная XY диаграмма - это составная диаграмма, которая может содержать другие XY диаграммы, имеющие одни и те же (совместные) оси и графики. В частности, она позволяет одним диаграммам изображать тренды для других.

Перетащите Столбчатую диаграмму XY (XY Bar Chart) (для отображения температуры и влажности) и Линейную диаграмму XY (XY Line Chart) (для отображения трендов) в Смешанную диаграмму XY (Mixed XY Chart).

А теперь переименуйте xyLineChart1 в trends, xyBarChart1 в thsensor. Чтобы переименовать компонент, щелкните правой кнопкой мыши в Дереве ресурсов, выберите элемент Переименовать во всплывающем меню  и введите новое имя в появившемся окне для редактирования.

Компонент можно также переименовать в его рабочей форме во всплывающем меню.

Давайте установим столбчатую диаграмму thsensor на заднем плане, а линейную диаграмму на переднем. Для этого выберите диаграмму thsensor в дереве ресурсов и установите свойство Z-Order, принадлежащее thsensor, на 2 в окне свойств.

Теперь сделайте так, чтобы диаграмма отображала температуру и влажность устройства thsensor. У сенсора температуры есть переменная temperaturei, содержащая целочисленное значение температуры по Цельсию,  умноженное на 10 (т.е. значение 234 - это 23.4 градуса Цельсия) и переменную humidityi , которая является значением влажности в процентах и умноженное на 10.

Диаграмма thsensor будет основана на данных переменной. Измените значение Типа источника данных на Переменную во вкладке данных Окно свойств:

Теперь кликните по элементу Переменные источника, чтобы установить новую серию данных. Откроется окно Переменных источника. Кликните Добавить ряд (), чтобы создать новую серию данных, а затем отредактируйте  ее:

• Установите в качестве Имени Temperature;
• Переключитесь в поле Контекст и кликните [...], чтобы отредактировать путь контекста интерактивно в селекторе объектов. Выберите устройство thsensor из дерева (название должно быть выделено жирным шрифтом, поскольку это контекст по умолчанию) и кликните OK:

Действительное значение для поля Контекст будет точка (".") вместо полного пути к контексту устройства. Это относительный путь, который позволит нашему виджету диаграмм работать с другими аналогичными устройствами, не только с тем, для которого он был создан.

• Выберите temperaturei из списка Переменные.
• Переключитесь в поле Выражения и кликните [...], чтобы отредактировать выражение данных интерактивно в редакторе выражений. Во-первых, в окне Редактора Выражений дважды кликните в разделе Относительные ссылки по полю temperaturei, чтобы добавить относительную ссылку. Во-вторых, добавьте / 10 к Выражению, чтобы разделить значение и, т.о., конвертировать его в градусы Цельсия. Это действие необходимо выполнить, поскольку поле переменной изначально содержит значение температуры, умноженное на 10, что требуется для хранения его как целого числа:

Примите выражение, кликнув по кнопке OK. Оставьте другие колонки диалогового окна переменные источника неизмененными. Таким образом, Вы получаете запись для температуры.

• А теперь добавьте и установите вторую серию данных для переменной humidityi аналогично тому, как Вы выполняли для переменной temperaturei.

Так должна выглядеть серия данных переменной:

Добавляя вторую запись переменных источника, кликнув Добавить ряд (), удерживайте кнопку Shift. Это скопирует запись для температуры, таким образом для влажности Вам нужно установить поля Имя, Переменная и Выражение в дублируемой записи.

Давайте настроим нашу диаграмму трендов для отображения линий тренда для диаграммы thsensor. Во-первых, в окне свойств переключите свойство Типа источника данных на тренд. Затем во вкладке тренд выберите thsensor в свойстве Имя диаграммы источника.

Диаграмма тренда создаст отдельные серии тренда для каждой серии диаграммы источника. Давайте теперь установим пользовательские имена серий тренда: кликните по свойству Имена серий и добавьте два ряда с именами Temperature Trend и Humidity Trend.

Когда диаграмма настроена для тренда, она использует массив данных диаграммы источника для подсчета трендов и осей диаграмм трендов для отображения линий трендов. Таким образом, мы можем удалить диаграммы трендов, к которым были добавлены автоматически оси, добавив Линейную диаграмму XY (на этапе 2) в смешанную диаграмму.

• Выберите mixedXYChart1 в дереве ресурсов.
• Перейдите в ярлык Оси и кликните в свойстве Оси диапазона.
• Выберите второй ряд в появившемся диалоговом окне Оси диапазона и нажмите кнопку Удалить ряд. (), чтобы удалить неиспользованную ось домена. Кликните OK.

• Выполните аналогичное действие для Осей домена.
• Переключите тип для оставшейся Оси домена и Оси данных: кликните по оси и установите ее тип в появившемся диалоговом окне Ось.

Кликните Готово (), чтобы закончить редактирование и сохранить виджет. Он должен появиться в Системном дереве:

Правой кнопкой мыши щелкните по узлу устройства () Вашего температурного сенсора. Вы должны увидеть новое действие Запустить виджет, именуемое в контекстном меню Диаграммой температуры ():

Выберите это действие для запуска виджета. В SberMobile IIoT Platform Client появится новое плавающее окно, содержащее виджет с нашей диаграммой.

Из этого урока Вы узнали, как сочетать простые диаграммы со смешанными диаграммами для простроения трендовых строк. Существует также ряд иных возможностей сочетания диаграмм, которые можно использовать в проектах. См. составные диаграммы.