Виджет "Диаграмма "Водопад" (с поддержкой тем)
Введение
В виджете "Диаграмма "Водопад" в мэшапе отображается адаптивная диаграмма "Водопад". Виджет позволяет визуально представлять накопительное изменение, поскольку значения добавляются к начальному значению или вычитаются из него.
Каждое увеличение или уменьшение может быть окрашено, чтобы подсветить положительные или отрицательные изменения для единственного ряда данных в диаграмме.
При перетаскивании виджета "Диаграмма "Водопад" в рабочую область он отображается, как показано ниже:
 | • Виджет "Диаграмма "Водопад" доступен для версии ThingWorx 9.2.0 и более поздних. • Виджет "Диаграмма "Водопад" доступен как стандартный виджет в платформе и как веб-компонент, который можно импортировать из SDK. • Диаграмма "Водопад" поддерживает только один источник данных. Если требуется использовать данные из нескольких источников, можно объединить данные в одну таблицу данных и использовать их в диаграмме. |
Формат данных
Необходимо создать таблицу данных с определениями полей, которые представляют структуру данных для диаграммы. Таблица данных должна включать определения полей для значений по осям X и Y. Каждая строка таблицы данных представляет категорию на оси X и соответствующее значение оси Y. В следующей таблице перечислены форматы данных для таблицы данных примера.
Ось X | Значение оси Y | Значение N оси Y | Ось Y | Ось Y | |||||
|---|---|---|---|---|---|---|---|---|---|
Определение поля | x:{name:'x',baseType:'STRING'} | Value1:{name:'Value1',baseType:'NUMBER'} | Value1:{name:'Value2',baseType:'NUMBER'} | {Selectable: True, baseType: 'BOOLEAN"} | {ShowTotal: False, baseType: 'BOOLEAN'} | ||||
Использование | Определяет значения оси X для столбика диаграммы или столбца. Данные должны иметь базовый тип STRING. Каждая строка отображается как категория на оси X. Определенное имя этого столбца является опцией, которая должна быть выбрана для свойства XAaxisField виджета. | Определяет значение оси Y и метку легенды для категории. | Определяет значение оси Y и метку легенды для каждого дополнительного ряда данных. |
Диаграмма "Водопад" поддерживает столбики, недоступные для выбора. Это означает, что можно наводить указатель на столбики диаграммы, но невозможно выбирать их. Необходимо создать дополнительный столбец Selectable в источнике данных таблицы данных. Значения или столбики являются интерактивными и по умолчанию имеют значение True. Можно задать значение False, чтобы сделать столбик невыбираемым. В этом поле регистр не учитывается. Свойство NonSelectableData в списке свойств определяет, может ли пользователь щелчком выбирать данные на диаграмме. Дополнительные сведения см. в таблице свойств. |
Определяет, будет ли увеличение или уменьшение значения отображаться в виде столбика с накоплением или с перекрытием на полном столбике в диаграмме. По умолчанию задано значение False. Можно задавать для этого параметра значение True, чтобы показывать столбики с накоплением или с перекрытием. Необходимо создать дополнительный столбец ShowTotal в источнике данных таблицы данных. В этом поле регистр не учитывается. Свойство ShowTotal в списке свойства определяет, будут ли столбики отображаться с накоплением или с перекрытием. Дополнительные сведения см. в таблице свойств. | ||||
Базовый тип | STRING | NUMBER | NUMBER | BOOLEAN | BOOLEAN | ||||
Пример строки | Game:'Cash In', где Cash In - наименование категории для отображения на оси X | Player1:100 - значение оси Y для категории | Player2: 100 - значение оси Y для второго ряда данных | Например, см. ниже изображение для нескольких рядов данных. | Например, см. ниже изображение для единственного ряда данных. |
| | • Первое и последнее значения оси X дают соответствующие значения оси Y и отображаются как сводные значения на диаграмме. • Если значение оси Y пусто в таблице данных, оно отображает текущее значение как правильный полный столбик на диаграмме. Если значение Y равно 0, на диаграмме отображается пустой столбик. |
• Данные одного ряда:
На следующем рисунке показан пример единственного ряда данных, возвращенного из таблицы данных с определением поля для оси Y:
На следующем рисунке показан виджет "Диаграмма "Водопад" с примером единственного ряда данных, загруженного в мэшап. Цвета тенденции, заданные с помощью свойства UseTrendColors, подсвечивают увеличение и уменьшение значений. Столбик для апреля построен с накоплением, а столбик для мая - с перекрытием полных столбиков на изображении.
• Данные нескольких рядов:
На следующем рисунке показан пример нескольких рядов данных, возвращенных из таблицы данных с определением поля для оси Y:
На следующем рисунке показан виджет "Диаграмма "Водопад" с примерами данных, загруженных в мэшап.
Привязка источника данных
Чтобы привязать диаграмму к источнику данных, выполните следующие шаги.
1. На панели Данные добавьте сервис данных, который возвращает таблицу данных с правильным форматом данных для виджета.
| | Убедитесь, что этот сервис инициируется событием во время выполнения. |
2. Привяжите свойство All Data сервиса данных к свойству Data диаграммы.
3. Выберите диаграмму, затем на панели Свойства используйте свойство XAxisField для выбора столбца таблицы данных, который будет использоваться для оси X.
По умолчанию на оси Y диаграммы автоматически отображаются все столбцы таблицы данных. Чтобы выбрать ряд данных вручную, выполните следующие действия.
a. Задайте для свойства NumberOfSeries фиксированное число.
b. Выберите столбец таблицы данных для каждого ряда данных, используя свойства DataField1..N.
4. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
Данные отобразятся на диаграмме. Каждый дополнительный столбец в привязанной таблице данных отображается в виде ряда данных. После привязки источника данных добавьте метки, используя свойства Label XAxisLabel и YAxisLabel.
Можно также сконфигурировать виджет, используя дополнительные свойства. Например:
• Чтобы отображались линейки, включите свойства ShowXAxisRuler и ShowYAxisRuler.
• Чтобы показать цвета тенденции для увеличения или уменьшения значения, включите свойство UseTrendColors.
• Для включения масштабирования вдоль вертикальной или горизонтальной оси включите свойства HorizonalZoom и VerticalZoom.
• Чтобы применить к диаграмме форматирование состояния, используйте свойство DataSeriesStyle. Дополнительные сведения см. в разделе Пример. Применение форматирования состояния к диаграммам.
Дополнительные сведения о доступных опциях конфигурации см. в приведенной ниже таблице свойств.
 | Чтобы данные диаграммы обновлялись автоматически во время выполнения, создайте функцию автоматического обновления и привяжите ее к сервису данных, возвращающему данные диаграммы. Дополнительные сведения см. в разделе Автообновление. |
Добавление дополнительной оси
Можно добавить дополнительную ось Y на диаграмму с помощью свойства ShowSecondYAxis. На следующем изображении показана диаграмма "Водопад" с дополнительной осью Y.
В следующей таблице перечислены свойства, которые можно использовать для включения и конфигурирования дополнительной оси Y:
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) |
|---|---|---|---|---|---|
ShowSecondYAxis | Добавляет в диаграмму дополнительную ось Y. При выборе этого свойства в списке свойств отображаются свойства SecondYAxisFormat, SecondYAxisLabel и SecondYAxisLabelAlignment. | BOOLEAN | false | Д | Н |
SecondYAxisLabel | Задает текстовую метку для дополнительной оси Y. | STRING | Дополнительная ось Y | Д | Д |
SecondYAxisLabelAlignment | Выравнивает метку дополнительной оси Y. Можно разместить метку Сверху, В середине или Снизу. По умолчанию метка располагается в середине. | STRING | В середине | Н | Н |
SecondYAxisFormat | Задает формат значений для дополнительной оси Y. Это свойство можно использовать для определения внешнего вида отображаемых данных. Например, можно задать число разрядов, отображаемых после десятичной точки. | STRING | 0000,0 | Д | Н |
Таблица свойств
В следующей таблице перечислены свойства, доступные в ThingWorx 9.4 и более поздних версий.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Связываемое | Локализуемое |
|---|---|---|---|---|---|
SampleSize | Задает число точек данных, отображаемых на диаграмме. | NUMBER | Н/Д | Н | Н |
ShowZoomButtons | Показывает кнопки увеличения и уменьшения масштаба на панели инструментов диаграммы, если включено масштабирование по горизонтали или вертикали. | BOOLEAN | false | Н | Н |
EmptyChartIcon | Указывает значок, отображаемый, если диаграмма пуста. | Медиаобъект | not visible | Н | Н |
EmptyChartLabel | Указывает значок, отображаемый, если диаграмма пуста. | STRING | [[ChartStateLabelEmpty]] | Н | Д |
ErrorStateIcon | Указывает значок, отображаемый, если диаграмма пуста. | Медиаобъект | error | Н | Н |
ErrorStateLabel | Указывает значок, отображаемый, если диаграмма пуста. | STRING | Н | Д | |
LoadingIcon | Указывает значок, отображаемый, если данные диаграммы загружаются. | Медиаобъект | chart loading icon | Н | Н |
NoDataSourceIcon | Указывает значок, отображаемый, если диаграмма не привязана к источнику данных. | Медиаобъект | bind | Н | Н |
NoDataSourceLabel | Указывает значок, отображаемый, если диаграмма не привязана к источнику данных. | STRING | [[ChartStateLabelNoData]] | Н | Д |
Свойства виджета "Диаграмма "Водопад" перечислены ниже.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) | ||
|---|---|---|---|---|---|---|---|
CustomClass | Определяемый пользователем класс CSS для применения к верхнему разделу виджета. Можно ввести несколько классов, разделенных пробелами. | STRING | Н/Д | Д | Н | ||
Data | Источник таблицы данных для диаграммы. | INFOTABLE | Н/Д | Д | Н | ||
DataField1 - DataField24 | Эти свойства будут перечислены, если задать для NumberOfSeries фиксированное число. Можно использовать эти свойства, чтобы для каждого ряда данных выбрать столбец таблицы данных, который будет использоваться. | Столбец таблицы данных | Н/Д | Н | Н | ||
DataLabel1 - DataLabel24 | Эти свойства будут перечислены, если задать для NumberOfSeries фиксированное число. Это свойство задает текст метки, которая отображается в области легенды для соответствующих рядов данных. | STRING | Н/Д | Д | Н | ||
DataSeriesStyle | Открывает диалоговое окно конфигурации форматирования состояния. Это свойство отображается, если для NumberOfSeries задано значение Авто. Определение состояния применяется ко всем рядам на диаграмме. Можно задать стиль ряда на основе данных, чтобы было проще выявлять тенденции и общую картину. | Определение состояния | Н/Д | Н | Н | ||
DataSeriesStyle1 - DataSereisStyle24 | Эти свойства перечислены в соответствии с числом, заданным для свойства NumberOfSeries. Можно использовать эти свойства, чтобы применить отдельное определение состояния к каждому ряду данных на диаграмме. | Определение состояния | Н/Д | Н | Н | ||
Disabled | Отключает виджет в мэшапе. Виджет будет отображаться в мэшапе, но не будет реагировать на щелчок или нажатие. | BOOLEAN | false | Д | Н | ||
DirectSelectionZoom | Позволяет увеличить масштаб, выбирая два элемента данных на диаграмме. Доступные для этого свойства опции: Горизонтальная ось, Вертикальная ось, Обе и Нет. Это свойство отображается в списке свойства при выборе HorizontalZoom | STRING | None | Д | Н | ||
DragSelectionZoom | Позволяет увеличивать масштаб в определенной части диаграммы путем рисования рамки выбора вокруг диапазона данных, который требуется просмотреть. Доступные для этого свойства опции: Горизонтальная ось, Вертикальная ось, Обе и Нет. Это свойство отображается в списке свойства при выборе HorizontalZoom | STRING | None | Д | Н | ||
ExternalPadding | Задает заполнение от осей. Значение заполнение представляет процент ширины полосы. | NUMBER | 25 | Д | Н | ||
HideConnectorLines | Скрывает соединительные линии, используемые для демонстрации изменения между каждым значением в последовательности данных. | BOOLEAN | false | Д | Н | ||
HideLegend | Скрывает область легенды. При выборе этого свойства в списке свойств не отображаются свойства LegendAlignment, LegendFilter, LegendMarkerShapes, LegendMaxWidth и LegendPosition. | BOOLEAN | false | Д | Н | ||
HideNotes | Скрывает область заметок. При выборе этого свойства в списке свойств не отображаются свойства Notes, NotesAlignment и NotesPosition. | BOOLEAN | false | Д | Н | ||
HideXAxis | Скрывает ось X. | BOOLEAN | false | Д | Н | ||
HideYAxis | Скрывает ось Y. | BOOLEAN | false | Д | Н | ||
HorizontalAxisLabelsRotation | Задает угол поворота для меток на горизонтальной оси. Можно ввести значение от -180 до 180. | NUMBER | Автоматический подбор размера | Н | Н | ||
HorizontalAxisMaxHeight | Задает максимальную высоту для горизонтальной оси. | NUMBER | 85 | Д | Н | ||
HorizontalZoom | Позволяет увеличивать масштаб по горизонтальной оси. Когда выбрано это свойство, в списке свойств отображаются свойства HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom и DragSelectionZoom. | BOOLEAN | false | Д | Н | ||
HorizontalRangeZoom | Добавляет элементы управления, позволяющие указать диапазон значений для увеличения масштаба по горизонтальной оси. При выборе этого свойства в списке свойств отображаются свойства HorizontalStartZoomLabel и HorizontalEndZoomLabel. | BOOLEAN | false | Д | Н | ||
HorizontalStartZoomLabel | Определяет текстовую метку для начала выбранного диапазона. | STRING | Н/Д | Д | Д | ||
HorizontalEndZoomLabel | Определяет текстовую метку для конца выбранного диапазона. | STRING | Н/Д | Д | Д | ||
HorizontalSliderZoom | Добавляет элемент управления ползунком, позволяющий отображать данные между минимальным и максимальным значениями на горизонтальной оси. При выборе этого свойства в списке свойств отображаются свойства HorizontalSliderZoomMaxLabel и HorizontalSliderZoomMinLabel. | BOOLEAN | false | Д | Н | ||
HorizontalSliderZoomMaxLabel | Указывает метку для максимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д | ||
HorizontalSliderZoomMinLabel | Указывает метку для минимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д | ||
InternalPadding | Задает заполнение между рядами данных. Заполнение - это процент ширины полосы. | NUMBER | 25 | Д | Н | ||
Label | Отображает текст метки для диаграммы "Водопад". | STRING | Диаграмма "Водопад" | Д | Д | ||
LabelType | Выбирает для диаграммы "Водопад" тип метки: Крупный заголовок, Заголовок, Подзаголовок, Крупное название, Название, Метка, Основной текст или Надпись. | STRING | Подзаголовок | Д | Н | ||
LabelAlignment | Выравнивает метку виджета диаграммы "Водопад" По левому краю, По центру или По правому краю. | STRING | Слева | Н | Н | ||
LabelPosition | Задает позицию метки: Сверху или Снизу. | STRING | Сверху | Н | Н | ||
LabelReset | Задает метку, которая отображается на кнопке сброса для элемента управления масштабом. | STRING | Сброс | Д | Д | ||
LegendAlignment | Выравнивает текст легенды по верхнему краю, по середине или по нижнему краю. Опции, доступные для этого свойства, зависят от значения свойства LegendPosition. | STRING | Сверху | Н | Н | ||
LegendFilter | Добавляет фильтр легенды, позволяющий пользователю фильтровать диаграмму во время выполнения. | BOOLEAN | false | Н | Н | ||
LegendMarkerShapes | Задает форму маркера легенды: Квадрат, Кружок или Нет. | STRING | Квадрат | Н | Н | ||
LegendMaxWidth | Задает максимальную ширину области легенды. | NUMBER | 736 | Д | Н | ||
LegendPosition | Задает позицию легенды Сверху, Снизу, Слеваили Справа. | STRING | Справа | Н | Н | ||
NonSelectableData | Использует значения True или False из поля selectable таблицы данных, чтобы определить, могут ли пользователи щелчком выбирать данные на диаграмме. Каждое значение в поле применяется ко всем наборам данных в той же строке. | BOOLEAN | false | Н | Н | ||
Notes | Указывает текст, отображаемый в области заметок. Можно ввести строку или выбрать лексему локализации. | STRING | Н/Д | Д | Д | ||
NotesAlignment | Выравнивает текст заметки По левому краю, По правому краю или По центру в области заметок. | STRING | Слева | Н | Н | ||
NotesPosition | Задает позицию области заметок Сверху или Снизу. | STRING | Снизу | Н | Н | ||
NumberOfReferenceLines | Задает число линий отсчета для отображения на диаграмме. Линии отсчета используются для сравнения данных диаграммы с определенными значениями. Можно добавить до 24 линий и сконфигурировать метку, ось и значение для каждой линии. Например, если задать для этого свойства значение от 1 до 24, в списке свойств отображаются соответствующие свойства ReferenceLine1Label - ReferenceLine24Label и ReferenceLine1Value - ReferenceLine24Value. | NUMBER | 0 | Н | Н | ||
NumberOfSeries | Задает число рядов данных, отображаемых на диаграмме. При автоматической настройке отображаются все ряды данных. | NUMBER | Auto | Н | Н | ||
NumberOfYLabels | Задает число меток для отображения на оси Y.
| NUMBER | Auto | Н | Н | ||
Orientation | Указывает ориентацию диаграммы. Можно отобразить накопительное изменение вдоль горизонтальной или вертикальной оси. | STRING | Вертикально | Н | Н | ||
ResetToDefaultValue | Сбрасывает входные данные для этого виджета к значениям по умолчанию. | Н/Д | Н/Д | Д | Н | ||
RulersInFront | Показывает линейки перед значениями данных. По умолчанию линейки отображаются позади данных. | BOOLEAN | false | Д | Н | ||
SeriesClicked | Инициирует событие, если щелкнуть точку данных. | Н/Д | Н/Д | Д | Н | ||
SelectedData | Таблица данных, которая содержит выбранные данные на диаграмме. | INFOTABLE | Н/Д | Д | Н | ||
SelectionMode | Определяет, сколько точек данных пользователь может выбрать одновременно. Опции: Одиночный, Несколько и По умолчанию. Выбирайте опцию Несколько, чтобы пользователь мог выбрать больше одной точки данных. | STRING | По умолчанию | Д | Н | ||
ShowHideLegend | Добавляет кнопку "Показать/скрыть", которая позволяет показывать или скрывать легенду диаграммы во время выполнения.
| BOOLEAN | false | Н | Н | ||
ShowTotal | Используйте значения True или False в поле ShowTotal таблицы данных, чтобы определить, отображаются ли значения тенденций относительно полного столбика или столбца. Если задано значение True, добавления помещаются с накоплением, а вычитания - с перекрытием столбика или столбца, используя при этом другой цвет. | BOOLEAN | false | Н | Н | ||
ShowValues | Показывает метки значений на диаграмме. При выборе этого свойства отображается свойство ValuesPosition в списке свойств. | BOOLEAN | false | Д | Н | ||
ShowXAxisRuler | Показывает линейку оси X. | BOOLEAN | false | Д | Н | ||
ShowYAxisRuler | Показывает линейку оси Y. | BOOLEAN | false | Д | Н | ||
ShowZeroValueRuler | Показывает линейку с нулевым значением. | BOOLEAN | false | Д | Н | ||
ShowZoomButtons | Показывает кнопки увеличения и уменьшения масштаба на панели инструментов диаграммы, если включено масштабирование по горизонтали или вертикали.
| BOOLEAN | false | Н | Н | ||
SparkView | Показывает упрощенную визуализацию диаграммы. Включите это свойство, чтобы скрыть метки, легенды и линейки. | BOOLEAN | false | Д | Н | ||
TabSequence | Порядковый номер виджета диаграммы "Водопад" при переходе по клавише TAB. | NUMBER | Н/Д | Н | Н | ||
UseTrendColors | Подсвечивает тренды, используя разные цвета, при отображении на диаграмме данных из одного ряда.
| BOOLEAN | false | Д | Н | ||
ValuesTooltip | Позволяет отображать пользовательскую всплывающую подсказку при выборе точки данных. Можно показывать название, текст, значения данных и создавать новые строки. Используйте следующий синтаксис: добавьте #title# перед строкой, чтобы показать название, #newline#, чтобы создать новую строку, ${<имя_лексемы>}, чтобы отобразить данные из доступных лексем диаграммы, и ${Data:<столбец_таблицы>} или $ {DataSourceN:<столбец_таблицы>} для отображения значений из столбца таблицы данных. Чтобы показать суммарное значение, добавьте лексему ${total}, заключив ее в лексемы #step#, если нужно отображать сумму только для шагов. Например: #title#Tooltip Title#newline#${label},${total}#newline#${data:Column3}#step#${total} in total#step#. | STRING | WaterfallChartDefaultTooltip | Д | Н | ||
ValuesPosition | Задает положение меток значений данных относительно столбцов на диаграммах в виде Вне столбика или Столбик с перекрытием. | STRING | Внешний столбик | Н | Н | ||
VerticalAxisMaxWidth | Задает максимальную ширину для вертикальной оси. | NUMBER | 85 | Д | Н | ||
VerticalZoom | Позволяет увеличивать масштаб по вертикальной оси. При выборе этого свойства отображается свойство VerticalSliderZoom в списке свойств. | BOOLEAN | false | Д | Н | ||
VerticalSliderZoom | Добавляет элемент управления ползунком, позволяющий отображать данные между минимальным и максимальным значениями на вертикальной оси. При выборе этого свойства в списке свойств отображаются свойства VerticalZoomMaxLabel и VerticalZoomMinLabel. | BOOLEAN | false | Д | Н | ||
VerticalZoomMaxLabel | Указывает текстовую метку для максимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д | ||
VerticalZoomMinLabel | Указывает текстовую метку для минимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д | ||
XAxisField | Поле таблицы данных, представляющее данные для оси X. | INFOTABLE | Н/Д | Н | Н | ||
XAxisLabel | Отображает текстовую метку для оси X. | STRING | Ось X | Д | Д | ||
XAxisLabelAlignment | Выравнивает метку оси X По левому краю, По центру или По правому краю. | STRING | Center | Н | Н | ||
YAxisFormat | Задает формат для значений оси Y. | STRING | 0000,0 | Д | Н | ||
YAxisLabel | Отображает текстовую метку для оси Y. | STRING | Ось Y | Д | Д | ||
YAxisLabelAlignment | Выравнивает метку оси Y Сверху, В середине или Снизу. | STRING | В середине | Н | Н | ||
YAxisMaximumValues | Задает максимальный диапазон для значений по оси Y. По умолчанию диапазон автоматически вычисляется на основе данных виджета. Значение для этого свойства игнорируется, если данные диаграммы содержат большее значение. | STRING | Н/Д | Д | Н | ||
YAxisMinimumValues | Задает минимальный диапазон для значений по оси Y. По умолчанию диапазон автоматически вычисляется на основе данных виджета. Значение для этого свойства игнорируется, если данные диаграммы содержат меньшее значение. | STRING | Н/Д | Д | Н |