Виджет "Комбинированная диаграмма" (с поддержкой тем)
Общие сведения
Виджет "Комбинированная диаграмма" позволяет представлять ряды данных на диаграмме с помощью нескольких типов маркеров, таких как столбцы, линии, область и точки. Можно наложить несколько наборов данных с помощью различных типов визуализации для сравнения величин в единицах измерения в нескольких рядах данных. Ось Y представляет количество, а ось X представляет категорию. Отображение данных с использованием различных типов визуализации на диаграмме облегчает чтение различных масштабов для осей Y.
Ниже представлены некоторые основные конфигурации, доступные для комбинированной диаграммы.
• Визуализация ряда данных с использованием линий, столбцов, областей и точек.
• Привязка данных из нескольких источников.
• Конфигурирование порядка накопления ZIndex для рядов данных.
• Применение форматирования состояния, чтобы задать стиль диаграммы на основе значений.
• Группировка и наложение рядов данных.
Рекомендации
• Включайте выборку данных для повышения производительности диаграммы во время выполнения. Отключение выборки данных может привести к снижению производительности, когда на диаграмме отображаются тысячи точек данных из нескольких рядов. Отключать выборку следует только в случае малого набора данных диаграммы.
Формат данных
Необходимо создать таблицу данных с определениями полей, которые представляют структуру данных для диаграммы. Таблица данных должна включать определения полей для значений по осям X и Y. Можно добавить несколько рядов данных, добавляя дополнительные столбцы с определениями полей для значений ряда данных. Каждая строка таблицы данных представляет категорию на оси X и соответствующие значения оси Y. В следующей таблице перечислены форматы данных для таблицы данных.
Ось X | Значение оси Y | Значение N оси Y | |||
|---|---|---|---|---|---|
Определение поля | x:{name: 'x', baseType: 'STRING'} | value1: {name: 'value1', baseType: 'NUMBER'} | value1:{name:'value2',baseType:'NUMBER'} | ||
Использование | Определяет значения по оси X. Данные должны иметь базовый тип STRING, NUMBER или DATETIME. Каждая строка отображается как категория на оси X. Определенное имя этого столбца является опцией, которая должна быть выбрана для свойства XAaxisField виджета. | Определяет значение оси Y и метку легенды для категории. | Определяет значение оси Y и метку легенды для каждого дополнительного ряда данных. | ||
Базовый тип | STRING, NUMBER или DATETIME
| NUMBER | NUMBER | ||
Пример строки | x: 'Apple', где Apple - наименование категории для отображения на оси X | value1: 10 - значение оси Y для категории | value2: 30 - значение оси Y для ряда данных N. |
На следующем рисунке показан пример возвращенных данных из таблицы данных с четырьмя определениями полей для оси Y:
Свойства виджета
Свойства виджета "Комбинированная диаграмма" перечислены ниже.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? (Д/Н) | Локализуемое? (Д/Н) |
|---|---|---|---|---|---|
AlignBarsAtZero | Выравнивает столбики всех осей Y на диаграмме по нулевому значению. | BOOLEAN | False | Д | Н |
AxisDisplayControl | Добавляет на панель инструментов диаграммы меню конфигурации, которое позволяет управлять видимостью осей Y во время выполнения. | BOOLEAN | False | Д | Н |
ChartType | Задает тип по умолчанию для визуализации, используемой для отображения данных ряда на диаграмме. Этот выбор можно переопределить вручную для каждого ряда данных с помощью свойства SeriesNType. | STRING | Линейная | Н | Н |
CustomClass | Указывает пользовательский класс CSS для применения к этому виджету. Можно ввести несколько классов, разделенных пробелами. | STRING | Н/Д | Д | Н |
Data | Источник таблицы данных для диаграммы. | Infotable | Н/Д | Д | Н |
DataFieldN | Указывает поле таблицы данных, используемое для ряда данных N. | Infotable | Н/Д | Н | Н |
DataLabelN | Метка для отображения в области легенды для ряда данных N. | STRING | Н/Д | Д | Д |
DataPointSelection | Указывает точку данных, которая будет выбрана относительно позиции указателя. Можно задать в свойстве выбор ближайшей точки данных на вертикальной оси, на горизонтальной оси или на обеих осях. Опции: • Нет • Позиция указателя • Ближайшая горизонтальная • Ближайшая вертикальная • Обе оси | STRING | Н/Д | Д | Н |
DataSeriesStyleN | Позволяет применить форматирование состояния для ряда данных N в диаграмме. Можно задать стиль ряда на основе данных, чтобы было проще выявлять тенденции и общую картину. | Форматирование по состоянию | Н/Д | Н | Н |
DirectSelectionZoom | Позволяет увеличить масштаб, выбирая два элемента данных на диаграмме. Доступные для этого свойства опции: Горизонтальная ось, Вертикальная ось, Обе и Нет. Это свойство отображается в списке свойств при выборе HorizontalZoom или VerticalZoom. | STRING | Нет | Д | Н |
DragSelectionZoom | Позволяет увеличивать масштаб в определенной части диаграммы путем рисования рамки выбора вокруг диапазона данных, который требуется просмотреть. Доступные для этого свойства опции: Горизонтальная ось, Вертикальная ось, Обе и Нет. Это свойство отображается в списке свойств при выборе HorizontalZoom или VerticalZoom. | STRING | Нет | Д | Н |
Disabled | Отключает виджет в мэшапе. | BOOLEAN | Н/Д | Д | Н |
DisplaySeriesNOn | Задает ось Y или группу накопления для ряда данных N. | STRING | Н | Н | |
EmptyChartIcon | Указывает значок, отображаемый, если диаграмма пуста. | MEDIA | not visible | Н | Н |
EmptyChartLabel | Указывает текст, отображаемый, когда в привязанной таблице данных нет никаких данных. | STRING | [[ChartStateLabelEmpty]] | Н | Д |
ErrorStateIcon | Указывает значок, отображаемый, если невозможно загрузить данные диаграммы. | MEDIA | error | Н | Н |
ErrorStateLabel | Определяет текст, отображаемый, если невозможно загрузить данные диаграммы. | STRING | [[ChartStateLabelError]] | Н | Н |
ExternalPadding | Задает заполнение от осей. Значение заполнения представляет процент ширины столбика. | NUMBER | 25 | Д | Н |
GroupPadding | Задает заполнение между рядами. Значение заполнения представляет процент ширины столбика. | NUMBER | 25 | Д | Н |
HideLegend | Скрывает область легенды. | BOOLEAN | False | Д | Н |
HideNotes | Скрывает область заметок. | BOOLEAN | False | Д | Н |
HideValues | Скрывает метки значений на диаграмме. | BOOLEAN | False | Д | Н |
HideXAxis | Скрывает ось X. | BOOLEAN | False | Д | Н |
HideYAxisN | Скрывает ось Y для ряда данных N. | BOOLEAN | False | Д | Н |
HorizontalAxisLabelsRotation | Введите значение от -180 до 180, чтобы задать угол поворота меток на горизонтальной оси. | NUMBER | Вычисляется автоматически | Н | Н |
HorizontalAxisMaxHeight | Задает максимальную высоту для горизонтальной оси. | NUMBER | 85 | Д | Н |
HorizontalZoom | Позволяет увеличивать или уменьшать масштаб по горизонтальной оси. При выборе этого свойства в списке свойств отображаются свойства HorizontalIntervalControl, HorizontalRangeZoom, HorizontalSliderZoom, DirectSelectionZoom и DragSelectionZoom. | BOOLEAN | False | Д | Н |
HorizontalIntervalControl | Добавляет элементы управления, позволяющие увеличивать масштаб по горизонтальной оси в соответствии с конкретными интервалами. Доступные опции - Нет (выбор по умолчанию) и Выпадающий список. Когда выбран Выпадающий список, свойства HorizontalIntervalControlLabel и HorizontalIntervalData отображаются в списке свойства. | STRING | Нет | Н | Н |
HorizontalIntervalControlLabel | Указывает текстовую метку для элементов управления масштабированием интервала для горизонтальной оси. | STRING | Н/Д | Д | Д |
HorizontalIntervalData | Источник данных для опций управления масштабом интервала. При выборе записи в раскрывающемся списке горизонтальных интервалов диаграмма масштабируется в соответствии с выбранной величиной длительности и начальной/конечной точкой прикрепления. | INFOTABLE | Н/Д | Д | Н |
HorizontalIntervalAnchorPoint | Позволяет выбрать позицию прикрепления диапазона интервалов в наборе данных. Выберите Начало, чтобы разместить интервал в начало набора данных, или Конец, чтобы разместить интервал в конце. Например, если задать трехмесячный интервал в наборе данных за 12 месяцев, можно выбрать Начало, чтобы показать первые 3 месяца или Конец, чтобы показать последние 3 месяца из набора данных. Это свойство отображается при выборе свойства ShowHorizontalAnchorPointControl. | STRING | Начало | Д | Н |
HorizontalIntervalAnchorPointLabel | Указывает метку для точки прикрепления интервала для горизонтальной оси. Это свойство отображается при выборе свойства ShowHorizontalAnchorPointControl. | STRING | Н/Д | Д | Д |
HorizontalRangeZoom | Добавляет элементы управления, позволяющие указать диапазон значений для увеличения масштаба по горизонтальной оси. При выборе этого свойства в списке свойств отображаются свойства HorizontalStartZoomLabel и HorizontalEndZoomLabel. | BOOLEAN | False | Д | Н |
HorizontalStartZoomLabel | Определяет текстовую метку для начала выбранного диапазона. | STRING | Н/Д | Д | Д |
HorizontalEndZoomLabel | Определяет текстовую метку для конца выбранного диапазона. | STRING | Н/Д | Д | Д |
HorizontalSliderZoom | Добавляет элемент управления ползунком, позволяющий отображать данные между минимальным и максимальным значениями на горизонтальной оси. При выборе этого свойства в списке свойств отображаются свойства HorizontalSliderZoomMaxLabel и HorizontalSliderZoomMinLabel. | BOOLEAN | False | Д | Н |
HorizontalSliderZoomMaxLabel | Указывает метку для максимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д |
HorizontalSliderZoomMinLabel | Указывает метку для минимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д |
InternalPadding | Задает заполнение между рядами. Значение заполнения представляет процент ширины столбика. | NUMBER | 25 | Д | Н |
Label | Указывает текстовую метку для отображения для комбинированной диаграммы. | STRING | [[ComboChart]] | Д | Д |
LabelReset | Задает метку, которая отображается на кнопке сброса на панели инструментов диаграммы. | STRING | Сброс | Д | Д |
LabelAlignment | Выравнивает текст для метки виджета. Опции: Нет, Слева, По центру, Справа. | STRING | Слева | Н | Н |
LabelPosition | Задает позицию текстовой метки. Опции: Нет, Сверху, Снизу, Слева. | STRING | Сверху | Н | Н |
LabelType | Задает тип метки для комбинированной диаграммы, такой как Заголовок, Подзаголовок, Метка или Основной текст. | STRING | Подзаголовок | Д | Н |
LegendAlignment | Выравнивает легенду диаграммы. | STRING | Слева | Н | Н |
LegendFilter | Добавляет флажки рядом с рядами данных в легенде, которые управляют видимостью рядов данных. | BOOLEAN | False | Н | Н |
LegendMaxWidth | Задает максимальную ширину области легенды. | NUMBER | 736 | Д | Н |
LegendPosition | Задает положение легенды диаграммы. Опции: Нет, Слева, По центру, Справа. | STRING | Слева | Н | Н |
LoadingIcon | Указывает значок, отображаемый, если данные диаграммы загружаются. | STRING | chart_loading_combo_pareto | Н | Н |
Margin | Это свойство отключено. Необходимо определить поля для этого адаптивного виджета в его контейнере. | STRING | 5 | Н | Н |
MarkerShape | Задает форму маркера для точек данных на диаграмме. Опции: Нет, Кружок, Квадрат, Ромб. | STRING | Кружок | Н | Н |
MultipleDataSources | Позволяет визуально представлять данные из нескольких источников на диаграмме. | BOOLEAN | False | Н | |
NoDataSourceIcon | Указывает значок, отображаемый, если диаграмма не привязана к источнику данных. | Носитель | bind | Н | Н |
NoDataSourceLabel | Указывает значок, отображаемый, если диаграмма не привязана к источнику данных. | STRING | [[ChartStateLabelNoData]] | Н | Д |
Notes | Указывает текст, отображаемый в области заметок. Можно ввести строку или выбрать лексему локализации. | STRING | Н/Д | Д | Д |
NotesAlignment | Выравнивает текст в области заметок. | STRING | Слева | Н | Н |
NotesPosition | Задает положение области заметок. | STRING | Снизу | Н | Н |
NumberOfReferenceLines | Задает число линий отсчета для отображения на диаграмме. Линии отсчета используются для сравнения данных диаграммы с определенными значениями. Можно добавить до 24 линий и сконфигурировать метку, ось и значение для каждой линии. | NUMBER | 0 | Н | Н |
NumberOfSeries | Задает число рядов данных, отображаемых на диаграмме. | NUMBER | 8 | Н | Н |
NumberOfStacks | Задает число стеков рядов данных, отображаемых на диаграмме. | NUMBER | 0 | Н | Н |
NumberOfXLabels | Задает число меток на оси X. | NUMBER | Авто | Д | Н |
NumberOfYaxes | Задает число осей Y для отображения на диаграмме. | NUMBER | 1 | Н | Н |
PointerType | Определяет вид указателя при наведении на диаграмму. Можно использовать направляющие для отслеживания значения данных относительно оси. Опции: Нет, Стандартная, Горизонтальная линия, Вертикальная линия, Перекрестие. | STRING | Стандартная | Д | Н |
ReferecneLineNLabel | Текстовая метка для линии отсчета. | STRING | Д | Д | Д |
ReferecneLineNValue | Задает числовое значение для линии отсчета. | NUMBER | Д | Н | Д |
ReferenceLineNAxis | Ось, которая будет использоваться для линии отсчета. | STRING | Н | Н | Н |
ResetToDefaultValue | Сбрасывает все входы для виджета до значений по умолчанию. | Сервис | Н/Д | Д | Н |
ReverseXAxis | Отображает значения оси X в обратном порядке. | BOOLEAN | False | Н | Н |
ReverseYAxis | Обращает порядок значений на оси Y. | BOOLEAN | False | Н | Н |
RulersInFront | Показывает линейки перед значениями данных. По умолчанию линейки отображаются позади данных. | BOOLEAN | False | Д | Н |
SampleSize | Задает максимальное число точек данных, отображаемых при визуализации больших наборов данных на диаграмме. Чтобы отключить выборку, задайте для этого свойства значение 0. | NUMBER | Авто | Д | Н |
SelectedData | Таблица данных, которая содержит выбранные данные на диаграмме. | INFOTABLE | Н/Д | Д | Н |
SelectedSeriesChanged | Событие, которое инициируется при изменении выбранного ряда. | Событие | Н/Д | Д | Н |
SelectionMode | Определяет, сколько точек данных пользователь может выбрать одновременно. Выбирайте опцию "Несколько", чтобы пользователь мог выбрать больше одной точки данных. Опции: Нет, По умолчанию, Одиночный, Несколько. | STRING | По умолчанию | Д | Н |
Series1MarkerShape | Задает форму маркера точек ряда данных 1 на диаграмме. | STRING | По умолчанию | Н | Н |
Series1MarkerSize | Задает размер маркера ряда данных 1. | NUMBER | 8 | Д | Н |
Series1Type | Задает тип визуализации, используемой для отображения ряда данных 1 на диаграмме. | STRING | По умолчанию | Н | Н |
Series1ZAxis | Задает порядок рядов на оси Z. По умолчанию для всех групп задано одно и то же значение по оси Z. Группы с накоплением упорядочиваются на основе типа ряда, за которым следует это свойство. | NUMBER | 0 | Н | Н |
SeriesClicked | Инициируется событие, если щелкнуть точку данных на диаграмме. | Событие | Н/Д | Д | Н |
ShowChartBands | Подсвечивает зарезервированное пространство для категорий столбчатой диаграммы. Если задано значение true, область для каждой категории закрашивается серым цветом. | BOOLEAN | False | Н | Н |
ShowDataLoading | Показывать значок вращения при загрузке данных. | BOOLEAN | True | Н | Н |
ShowHideLegend | Добавляет кнопку "Показать/скрыть", которая позволяет показывать или скрывать легенду диаграммы во время выполнения. | BOOLEAN | False | Н | Н |
ShowHorizontalAnchorPointControl | Добавляет элементы управления для корректировки значения прикрепления для горизонтальной оси. При выборе этого свойства в списке свойств отображаются свойства HorizontalIntervalAnchorPoint и HorizontalIntervalAnchorPointLabel. | BOOLEAN | False | Д | Н |
ShowXAxis | Показывает линейку оси X. | BOOLEAN | False | Д | Н |
ShowYAxis | Показывает линейку оси Y. | BOOLEAN | False | Д | Н |
ShowXAxisRuler | Показывает линейку оси X. | BOOLEAN | False | Д | Н |
ShowYAxisRuler | Показывает линейку оси Y. | BOOLEAN | False | Д | Н |
ShowZeroValueRuler | Показывает линейку с нулевым значением. | BOOLEAN | False | Д | Н |
SparkView | Показывает упрощенный вид при визуализации диаграммы. Включите это свойство, чтобы скрыть метки, легенды и линейки. | BOOLEAN | False | Д | Н |
ShowZoomButtons | Показывает кнопки увеличения и уменьшения масштаба на панели инструментов диаграммы, если включено масштабирование по горизонтали или вертикали. | BOOLEAN | False | Н | Н |
TabSequence | Порядковый номер виджета при переходе по клавише TAB. | NUMBER | 0 | Н | Н |
ValuesPosition | Задает положение меток значений данных относительно точек данных. | STRING | Выше | Н | Н |
ValuesPositionBar | Задает положение меток значений данных относительно столбиков диаграммы. | STRING | Внешний столбик | Н | Н |
ValuesTooltip | STRING | Д | Д | ||
VerticalAxisMaxWidth | Задает максимальную ширину для вертикальной оси. | NUMBER | 85 | Д | Н |
VerticalZoom | Позволяет увеличивать или уменьшать масштаб по вертикальной оси. | BOOLEAN | False | Д | Н |
VerticalSliderZoom | Добавляет элемент управления ползунком, позволяющий отображать данные между минимальным и максимальным значениями на вертикальной оси. При выборе этого свойства в списке свойств отображаются свойства VerticalZoomMaxLabel и VerticalZoomMinLabel. | BOOLEAN | False | Д | Н |
VerticalZoomMaxLabel | Указывает текстовую метку для максимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д |
VerticalZoomMinLabel | Указывает текстовую метку для минимального значения ползунка управления масштабом. | STRING | Н/Д | Д | Д |
Visible | Если включено, виджет становится видимым в мэшапе. | BOOLEAN | True | Д | Н |
XAxisField | Выберите поле таблицы данных, содержащее данные для оси X. | INFOTABLE | Н/Д | Н | Н |
XAxisLabel | Задает текстовую метку для оси X. | STRING | [[XAxis]] | Д | Д |
XAxisLabelAlignment | Выравнивает метку оси X. | STRING | Слева | Н | Н |
XAxisType | Задает тип формата по оси X. | STRING | Строка | Д | Н |
YAxesMaxWidth | Задает максимальную ширину области оси Y. Если ширина области превышает максимальную, отображается полоса прокрутки. | NUMBER | 1200 | Д | Н |
YAxisNFormat | Задает формат для значений оси Y N. | STRING | 0000,0 | Д | Н |
YAxisNLabel | Задает текстовую метку для оси Y N. | STRING | [[YAxis]] | Д | Д |
YAxisNLabelAlignment | Выравнивает метку для оси Y N. | STRING | В середине | Н | Н |
YAxisNMaximumValue | Задает максимальное значение для диапазона по оси Y. По умолчанию диапазон автоматически вычисляется на основе данных виджета. | NUMBER | Авто | Д | Н |
YAxisNMinimumValue | Задает минимальное значение для диапазона по оси Y. По умолчанию диапазон автоматически вычисляется на основе данных виджета. | NUMBER | Авто | Д | Н |
YAxisNNumberOfLabels | Задает число меток для оси Y N. | NUMBER | Авто | Д | Н |
YAxisNPosition | Указывает положение оси Y. Если задано значение "Авто", первая ось Y отображается как основная, а остальные - как дополнительные. | STRING | Авто | Н | Н |
ZeroValueRuler | Управляет видимостью линеек с нулевым значением на диаграмме. Линейку можно отобразить только для основной или дополнительной оси Y. Опции: Основная ось Дополнительная ось, Нет, Обе. | STRING | Нет | Д | Н |