Как добавить
- Перейдите в режим редактирования (кнопка ☰ слева вверху), затем кнопку "Редактировать".
- Нажмите «Добавить иконку».
- На панели "Выберите что нужно" выберите "График".
- Виджет появится на рабочем поле — по умолчанию размер 600×360 пикселей.
- Правой кнопкой мыши откройте свойства и настройте источники данных.
Режимы отображения
VirtualGraph поддерживает четыре режима, выбирается в настройках виджета:
🔵 Авто
Система автоматически выбирает тип графика в зависимости от данных. Для числовых параметров — обычный линейный график, для дискретных — лента состояний.
📈 Обычный график
Линейный (или фоновый) график исторических значений. Можно добавить несколько серий от разных датчиков — они отображаются на одном полотне с общей осью времени. Каждая серия имеет свой цвет и может иметь независимую ось Y.
🎨 Лента состояний
Горизонтальная цветная полоса, которая показывает смену дискретных состояний во времени: например, включён / выключен / в ошибке. Каждому состоянию назначается свой цвет. Удобно для отображения работы реле, режимов, тревог.
🎨🎨 Несколько лент состояний
Несколько лент, каждая из которых отображает состояния своего параметра. Полезно для сравнения работы нескольких устройств на одной временной шкале.
Настройки обычного графика
Каждая серия — это один параметр одного устройства. Можно добавить несколько серий:
| Параметр серии | Описание |
|---|---|
| Device SN | Серийный номер источника данных (физического или виртуального устройства) |
| Параметр | Название параметра: temperature, humidity, power и т.д. |
| Масштаб | Коэффициент умножения значений (например, 0.001 для перевода Вт в кВт) |
| Смещение | Прибавляется к каждому значению после масштабирования |
| Цвет | Цвет линии серии на графике |
| Показывать ось Y | Отображать ли метку оси Y для этой серии |
| Режим рисования |
Линия — обычный линейный графикФон — закрашивает площадь под линией другой серии (для наложения графиков)
|
| Параметр | Описание |
|---|---|
| Ширина / Высота | Размер виджета на рабочем поле (по умолчанию 600×360 пикселей) |
| Знаков после запятой | Точность отображения значений: 0, 1 или 2 знака |
Настройки ленты состояний
Лента состояний настраивается для каждой «дорожки» отдельно. Каждая дорожка соответствует одному параметру одного устройства.
| Параметр дорожки | Описание |
|---|---|
| Метка | Подпись дорожки, отображается слева |
| Device SN | Источник данных |
| Параметр | Параметр устройства: state, action, occupancy и т.д. |
| Формула (formulaJs) | JavaScript-выражение для преобразования значения перед отображением. Необязательно. |
| Состояния |
Список пар «ключ → цвет»: — Ключ: значение параметра ( on, off, true)— Цвет: выбирается из палитры (синий, зелёный, красный, жёлтый, оранжевый, серый, фиолетовый, голубой) |
Пример: лента состояний для реле освещения
- Метка: Свет спальня
- Device SN:
relay_bedroom - Параметр:
state - Состояния:
ON→ 🟡 ЖёлтыйOFF→ ⬜ Серый
Лента покажет, когда свет был включён в течение дня.
Если между двумя измерениями прошло больше указанного числа минут, лента разрывается. Это помогает не рисовать линию там, где данные отсутствовали. По умолчанию: 30 минут.
Примеры применения
📊 Температура и влажность в одном окне
Режим: Обычный график
Серия 1: датчик температуры, параметр temperature, цвет красный
Серия 2: датчик влажности, параметр humidity, цвет синий, масштаб 1
⚡ Мощность в киловаттах из ваттов
Режим: Обычный график
Серия: счётчик электроэнергии, параметр power, Масштаб: 0.001
Результат: график отображает кВт вместо Вт
🚪 Когда открывалась дверь
Режим: Лента состояний
Параметр: contact датчика двери
Состояния: true → красный (открыта), false → зелёный (закрыта)
🔌 Сравнение работы нескольких реле
Режим: Несколько лент состояний
Дорожка 1: насос, параметр state
Дорожка 2: клапан, параметр state
Дорожка 3: нагреватель, параметр state
Используйте VirtualGraph для создания наглядных панелей мониторинга прямо на рабочем поле — без необходимости открывать отдельные окна графиков.