Виджет "Календарный план" (с поддержкой тем)
Введение
В виджете "Календарный план" отображается диаграмма расписания в мэшапе.
 | Виджет "Календарный план" доступен как стандартный виджет платформы и как веб-компонент, который может быть импортирован из SDK. |
Формат данных
Данные календарного плана должны состоять из таблицы данных с двумя определениями полей:
• Ресурсы - определяет ресурсы, которые должны отображаться на оси ресурсов.
• Данные - определяет вложенные таблицы данных с данными, отображаемыми для каждого ресурса.
Ресурс | Таблица данных | |
|---|---|---|
Определение поля | Resource:{name:'Resource',baseType:'STRING'} | Data:{name:'Data',baseType:'INFOTABLE'} |
Использование | Определяет значения оси X для столбика диаграммы или столбца. Данные должны быть строками. Каждая строка отображается как категория на оси X. Определенное имя этого столбца является опцией, которая должна быть выбрана для свойства ResouceField виджета. | Определяет таблицы данных с данными для ресурса. |
Базовый тип | STRING | INFOTABLE |
Пример строки | Resource:'Apple' - где Apple является наименованием ресурса. | Data:'Infotable1' - сущность таблицы данных с данными ресурса |
Для каждого ресурса, определяемого в первой таблице данных, необходимо создать таблицу данных с определениями полей, которые представляют структуру данных для ресурса на диаграмме. В следующей таблице перечислены требуемые структура данных и определения полей, которые используются для таблицы данных.
reason | info | start | end | color | |
|---|---|---|---|---|---|
Определение поля | reason:{name:'reason',baseType:'STRING'} | info:{name:'info',baseType:'STRING'} | start:{name:'start',baseType:'DATETIME'} | end:{name:'end',baseType:'DATETIME'} | color:{name:'color',baseType:'STRING'} |
Использование | Обязательное поле, которое определяет наименование задания или причину регистрации события ресурса. Данные из этого столбца отображаются как легенды диаграммы. | Необязательное поле, определяющее описание события ресурса. | Обязательное поле, определяющее дату начала для события ресурса. | Обязательное поле, определяющее дату окончания для события ресурса. | Необязательное поле, определяющее конкретный цвет для представления события на диаграмме. |
Базовый тип | STRING | STRING | DATETIME | DATETIME | STRING |
Пример строки | reason:'Maintenance', где Maintenance - наименование события, которое нужно отобразить на диаграмме. | info:'Maintenance event description', где Maintenance event description - описание события, которое будет показано на диаграмме. | start:'2020-01-07 03:57:43.322' - дата начала события обслуживания. | end:'2020-01-26 07:38:12.102' - дата окончания события обслуживания. | color:'red' - событие отображается с использованием красного цвета. |
| | Определения полей таблицы данных должны совпадать с именами, указанными в предыдущей таблице. |
Каждая строка представляет время или длительность события или задания в ресурсе. На следующем рисунке показан формат данных, возвращаемых сервисом данных для диаграммы расписания:
Для опций управления масштабом интервала необходимо создать таблицу данных, которая состоит из двух полей: метка и длительность. Базовым типом данных в двух полях должен быть STRING. На следующем рисунке показан формат возвращаемых данных сервиса данных.
Значения, которые можно использовать в поле duration, и диапазон, который они представляют:
• Y - год
• M - месяц
• W - неделя
• d - день
• h - час
• m - минута
• s - секунда
• ms - миллисекунда
| | В символах учитывается регистр. Например, "M" представляет месяц, а "m" представляет минуту. |
Привязка источника данных
Для отображения данных на диаграмме выполните следующие действия.
1. На панели Данные добавьте сервис данных, который возвращает таблицу данных с правильным форматом данных для виджета.
2. Привяжите свойство All Data сервиса данных к свойству Data диаграммы.
3. Выберите диаграмму, а затем на панели Свойства задайте следующие свойства.
◦ ResourceField - выберите столбец таблицы данных, который будет использоваться для оси ресурса.
◦ DataField - выберите столбец таблицы данных с данными для каждого ресурса. Каждое поле - это вложенная таблица данных.
4. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Данные таблицы данных будут отображены на диаграмме.
Добавление дополнительной оси
Можно добавить дополнительную ось в диаграмму расписания. Дополнительная ось используется для отображения даты в другом формате или в другой языковой настройке. Чтобы добавить дополнительную ось времени в диаграмму, выполните следующие действия.
1. Выберите диаграмму, а затем откройте панель Свойства.
2. Установите флажок рядом со свойством SecondTimeAxis. Будут перечислены дополнительные свойства.
3. Чтобы указать другой формат даты для дополнительной оси, введите шаблон даты для свойства SecondTimeAxisDateFormatToken или выберите лексему локализации.
4. Щелкните Сохранить, затем щелкните Просмотр мэшапа.
Дополнительная ось времени будет отображена в соответствии с указанным форматом даты.
На следующем рисунке показан виджет "Календарный план" с дополнительной осью.
На диаграмме отображаются события для нескольких ресурсов. Дополнительная и основная оси времени используются для отображения даты в двух различных форматах. На основной оси отображаются дата и месяц, а на дополнительной оси отображается номер недели. Для отображения формата даты с использованием номера недели задайте для свойства SecondTimeAxisDateFormatToken значение w. Дополнительные сведения о доступных форматах см. в разделе Форматирование даты и времени для виджетов.
| | Свойства дополнительной оси времени доступны только в ThingWorx 9.1 и более поздних версиях. |
В следующей таблице перечислены свойства, которые можно использовать для включения и конфигурирования дополнительной оси времени:
Свойство | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Поддержка локализации |
|---|---|---|---|---|---|
SecondTimeAxis | Добавляет дополнительную ось времени в диаграмму. | BOOLEAN | False | Д | Н |
SecondTimeAxisLabel | Указывает текстовую метку для дополнительной оси времени. | STRING | Вторая ось времени | Д | Д |
SecondTimeAxisLabelAlignment | Выравнивает метку дополнительной оси времени. По умолчанию метка выровнена слева. | STRING | Слева | Н | Н |
SecondTimeAxisDateFormatToken | Позволяет локализовать формат даты, используемый для дополнительной оси времени, путем использования шаблона dd-mm-yy. По умолчанию используется формат даты операционной системы. | STRING | Н/Д | Д | Д |
Свойства виджета
В следующей таблице перечислены свойства, доступные в ThingWorx 9.4 и более поздних версий.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Связываемое | Локализуемое |
|---|---|---|---|---|---|
EmptyChartIcon | Указывает значок, отображаемый, если диаграмма пуста. | Медиаобъект | not visible | Н | Н |
EmptyChartLabel | Указывает значок, отображаемый, если диаграмма пуста. | STRING | [[ChartStateLabelEmpty]] | Н | Д |
ErrorStateIcon | Указывает значок, отображаемый, если диаграмма пуста. | Медиаобъект | error | Н | Н |
ErrorStateLabel | Указывает значок, отображаемый, если диаграмма пуста. | STRING | Н | Д | |
LoadingIcon | Указывает значок, отображаемый, если данные диаграммы загружаются. | Медиаобъект | chart loading icon | Н | Н |
NoDataSourceIcon | Указывает значок, отображаемый, если диаграмма не привязана к источнику данных. | Медиаобъект | bind | Н | Н |
NoDataSourceLabel | Указывает значок, отображаемый, если диаграмма не привязана к источнику данных. | STRING | [[ChartStateLabelNoData]] | Н | Д |
В следующей таблице перечислены свойства, доступные в версии ThingWorx 9.3.5 и более поздних.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Связываемое | Локализуемое |
|---|---|---|---|---|---|
ShowZoomButtons | Показывает кнопки увеличения и уменьшения масштаба на панели инструментов диаграммы, если включено масштабирование. | BOOLEAN | false | Н | Н |
В следующей таблице перечислены свойства, доступные в ThingWorx 9.3.2 и более поздних версий.
Имя свойства | Описание | Базовый тип | Связываемое | Локализуемое | ||
|---|---|---|---|---|---|---|
NumberOfTimeLabels | Задает число меток для отображения на оси времени.
| NUMBER | Н | Д |
В следующей таблице перечислены свойства диаграммы, доступные в ThingWorx 9.2 и более поздних версий.
Имя свойства | Описание | Базовый тип | Связываемое | Локализуемое |
|---|---|---|---|---|
NumberOfReferenceLines | Число линий отсчета для отображения на диаграмме. Можно добавить до 24 линий отсчета. Дополнительные свойства добавляются для каждой линии отсчета. | NUMBER | Д | Н |
ReferecneLineNLabel | Текстовая метка для линии отсчета. | STRING | Д | Д |
ReferecneLineNValue | Значение для линии отсчета. Можно выбрать дату для задания линии отсчета. | DATETIME | Д | Н |
Свойства виджета "Календарный план" перечислены ниже.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) | ||
|---|---|---|---|---|---|---|---|
AxisZoom | Позволяет увеличивать масштаб по оси времени. Когда выбрано это свойство, в списке свойств отображаются свойства DirectSelectionZoom, DragSelectionZoom, TimeAxisIntervalControl и TimeAxisRangeZoom. | BOOLEAN | False | Д | Н | ||
CustomClass | Определяемый пользователем класс CSS для применения к верхнему разделу виджета. Можно ввести несколько классов, разделенных пробелами. | STRING | Н/Д | Д | Н | ||
DirectSelectionZoom | Позволяет увеличить масштаб, выбирая два элемента данных на диаграмме. Доступны опции: Нет, Ось ресурсов, Ось времени и Обе. | STRING | None | Д | Н | ||
DragSelectionZoom | Позволяет увеличивать масштаб в определенной части диаграммы, нарисовав рамку выбора вокруг диапазона данных, который требуется просмотреть. Доступны опции: Нет, Ось ресурсов, Ось времени и Обе. | STRING | None | Д | Н | ||
Data | Источник таблицы данных для диаграммы. | INFOTABLE | Н/Д | Д | Н | ||
DataField | Выбирает поле таблицы данных, содержащее данные времени для ресурсов диаграммы. | INFOTABLE | Н/Д | Д | Н | ||
Disabled | Отключает виджет в мэшапе. Виджет будет отображаться в мэшапе, но не будет реагировать на щелчок или нажатие. | BOOLEAN | False | Д | Н | ||
EndTime | Задает дату и время конца диапазона масштабирования. | DATETIME | Н/Д | Д | Н | ||
ExternalPadding | Задает заполнение из осей. Заполнение - это процент ширины полосы. | NUMBER | 25 | Д | Н | ||
HideLegend | Скрывает область легенды. При выборе этого свойства в списке свойств не отображаются свойства LegendAlignment, LegendFilter, LegendMarkerShapes, LegendMaxWidth и LegendPosition. | BOOLEAN | False | Д | Н | ||
HideNotes | Скрывает область заметок. При выборе этого свойства в списке свойств не отображаются свойства Notes, NotesAlignment и NotesPosition. | BOOLEAN | False | Д | Н | ||
HideResourcesAxis | Скрывает ось ресурсов. | BOOLEAN | False | Д | Н | ||
HideTimeAxis | Скрывает ось времени. | BOOLEAN | False | Д | Н | ||
HorizontalAxisMaxHeight | Задает максимальную высоту для горизонтальной оси. | NUMBER | 85 | Д | Н | ||
HorizontalAxisLabelsRotation | Задает угол поворота для меток на горизонтальной оси. Можно ввести значение от -180 до 180. | NUMBER | Автоматический подбор размера | Н | Н | ||
InternalPadding | Задает заполнение между рядами. Заполнение - это процент ширины полосы. | NUMBER | 25 | Д | Н | ||
Label | Отображает текстовую метку для календарного плана. | STRING | Календарный план | Д | Д | ||
LabelType | Выбирает тип метки для календарного плана: Заголовок, Подзаголовок, Метка или Основной текст. | STRING | Подзаголовок | Д | Н | ||
LabelAlignment | Выравнивает метку виджета "Календарный план" По левому краю, По центру или По правому краю. Опции, доступные для этого свойства, зависят от значения свойства LabelPosition. | STRING | Слева | Н | Н | ||
LabelPosition | Задает позицию метки Сверху или Снизу. | STRING | Top | Н | Н | ||
LabelReset | Задает метку, которая отображается на кнопке сброса для элемента управления масштабом. | STRING | Сброс | Д | Д | ||
LegendAlignment | Выравнивает текст легенды по верхнему краю, по середине или по нижнему краю. Опции, доступные для этого свойства, зависят от значения свойства LegendPosition. | STRING | Top | Н | Н | ||
LegendFilter | Добавляет фильтр легенды, позволяющий пользователю фильтровать диаграмму во время выполнения. | BOOLEAN | false | Н | Н | ||
LegendMarkerShapes | Задает форму маркера легенд рядов данных: Квадрат, Кружок или Нет. | STRING | Квадрат | Н | Н | ||
LegendMaxWidth | Задает максимальную ширину области легенды. | NUMBER | 736 | Д | Н | ||
LegendPosition | Задает позицию легенды Сверху, Снизу, Слеваили Справа. | STRING | Справа | Н | Н | ||
MultipleDataSources | Позволяет визуально представлять данные из нескольких источников на диаграмме. При выборе этого свойства отображается свойство NumberOfDataSources в списке свойств. | BOOLEAN | false | Н | Н | ||
Notes | Указывает текст, отображаемый в области заметок. Можно ввести строку или выбрать лексему локализации. | STRING | Н/Д | Д | Д | ||
NotesAlignment | Выравнивает текст заметки По левому краю, По правому краю или По центру. Опции, доступные для этого свойства, зависят от значения свойства NotesPosition. | STRING | Слева | Н | Н | ||
NotesPosition | Задает позицию области заметок Сверху или Снизу. | STRING | Снизу | Н | Н | ||
NumberOfDataSources | Задает число источников данных, которые можно привязать к диаграмме. | NUMBER | 2 | Н | Н | ||
ResetToDefaultValue | Сбрасывает входные данные для этого виджета до значений по умолчанию. | Н/Д | Н/Д | Д | Н | ||
ResourceField | Поле таблицы данных, содержащее ресурсы, показанные на диаграмме. | INFOTABLE | Н/Д | Н/Д | Н/Д | ||
ResourcesAxisLabel | Отображает текстовую метку для оси ресурсов. | STRING | Ось ресурсов | Д | Д | ||
ResourcesAxisLabelAlignment | Выравнивает метку оси ресурсов Сверху, В середине или Снизу. | STRING | В середине | Н | Н | ||
ReverseResourcesAxis | Отображает значения оси ресурсов в обратном порядке. | BOOLEAN | false | Н | Н | ||
ReverseTimeAxis | Отображает значения оси времени в обратном порядке. | BOOLEAN | false | Н | Н | ||
RulersInFront | Показывает линейки перед значениями данных. По умолчанию линейки отображаются позади данных. | BOOLEAN | False | Д | Н | ||
SeriesClicked | Инициирует событие, если щелкнуть точку данных. | Н/Д | Н/Д | Д | Н | ||
ShowHideLegend | Добавляет кнопку "Показать/скрыть", которая позволяет показывать или скрывать легенду диаграммы во время выполнения.
| BOOLEAN | false | Н | Н | ||
ShowResourcesAxisRuler | Показывает линейку оси ресурсов. | BOOLEAN | False | Д | Н | ||
ShowTimeAxisRuler | Показывает линейку оси времени. | BOOLEAN | False | Д | Н | ||
SparkView | Показывает упрощенную визуализацию диаграммы. Включите это свойство, чтобы скрыть метки, легенды и линейки. | BOOLEAN | False | Д | Н | ||
StartTime | Задает дату и время начала диапазона масштабирования. | DATETIME | Н/Д | Д | Н | ||
TabSequence | Номер последовательности виджета "Календарный план" при нажатии клавиши TAB. | NUMBER | Н/Д | Н | Н | ||
TimeAxisIntervalControl | Добавляет элементы управления, позволяющие увеличивать масштаб по горизонтальной оси в соответствии с конкретными интервалами. По умолчанию для этого свойства выбрано значение Нет. Когда выбран Выпадающий список, свойства TimeAxisIntervalControlLabel, TimeAxisIntervalData, TimeAxisIntervalAnchorPoint и TimeAxisIntervalAnchorPointLabel отображаются в списке свойств. | STRING | None | Д | Н | ||
TimeAxisIntervalControlLabel | Указывает текстовую метку для элементов управления масштабированием интервала для оси времени. | STRING | Н/Д | Д | Д | ||
TimeAxisIntervalData | Источник данных для опций управления масштабом интервала. При выборе записи в раскрывающемся списке интервалов диаграмма масштабируется в соответствии с выбранной величиной длительности и начальной/конечной точкой прикрепления. | INFOTABLE | Н/Д | Д | Н | ||
TimeAxisIntervalAnchorPoint | Позволяет выбрать позицию прикрепления диапазона интервалов в наборе данных. Выберите Начало, чтобы разместить интервал в начало набора данных, или Конец, чтобы разместить интервал в конце. Например, если задать трехмесячный интервал в наборе данных за 12 месяцев, можно выбрать Начало, чтобы показать первые 3 месяца или Конец, чтобы показать последние 3 месяца из набора данных. | STRING | Начало | Д | Н | ||
TimeAxisIntervalAnchorPointLabel | Указывает метку для точки прикрепления интервала для оси времени. | STRING | Н/Д | Д | Д | ||
TimeAxisLabelAlignment | Выравнивает метку оси времени По левому краю, По правому краю или По центру. | STRING | Слева | Н | Н | ||
TimeAxisLabel | Отображает текстовую метку для оси времени. | STRING | Ось времени | Д | Д | ||
TimeAxisDateFormatToken | Локализует формат даты с использованием образца ДД-ММ-ГГ для оси времени. | STRING | Н/Д | Д | Д | ||
TimeAxisRangeZoom | Добавляет элементы управления, позволяющие указать диапазон дат и времени для масштабирования по оси времени. Диапазон можно задать с помощью свойств StartTime и EndTime. При выборе этого свойства в списке свойств отображаются свойства TimeAxisStartZoomLabel и TimeAxisEndZoomLabel. | BOOLEAN | False | Д | Н | ||
TimeAxisStartZoomLabel | Указывает метку для начала выбора диапазона. | STRING | Н/Д | Д | Д | ||
TimeAxisEndZoomLabel | Указывает метку для конца выбора диапазона. | STRING | Н/Д | Д | Д | ||
VerticalAxisMaxWidth | Задает максимальную ширину для вертикальной оси. | NUMBER | 85 | Д | Н |