13 | Документация

Виджет. Блок График

Для визуализации информации, содержащейся в слое сервиса, и отображения вычисленного статистического показателя в виде графика, столбчатой, горизонтальной или лепестковой диаграмм предназначен блок   График .
Добавьте блок (см. Рисунок 385 ) и задайте общие настройки (см. п. 6.3 ).
Рисунок 385 - Блок График
Основные шаги настройки блока включают в себя:
  • выбор сервиса и слоя, на основе данных которого будет построен график или диаграмма;
    Укажите сервис (параметр Сервис ). Выберите из выпадающего списка слой или укажите номер слоя (параметр Слой ). Чтобы ограничить объекты, участвующие при построении графика или диаграммы, задайте определяющий запрос по кнопке (см. Рисунок 386 ). Например, groups_count IS NOT NULL означает, что в блоке не будут использоваться объекты, у которых атрибутивное поле groups_count содержит N ull .
Рисунок 386 - Пример определяющего запроса к слою
    1. настройка ключевого поля, данные которого откладываются (см. п. 6.5.1 ):
      • по горизонтальной оси - для графиков и столбчатой диаграммы;
      • по вертикальной оси - для горизонтальной диаграммы;
      • по радиальным осям - для лепестковой диаграммы;
    3. настройка атрибутивных полей, данные которых будут отображаться на графике или диаграмме (см. п. 6.5.2 );
    4. выбор вида графика или диаграммы (см. п. 6.5.3 ):
    5. график (линейная диаграмма);
    6. столбчатая диаграмма;
    7. горизонтальная диаграмма;
    8. лепестковая диаграмма.
Дополнительно вы можете указать Сообщение при отсутствии данных (можно использовать HTML-код). При нажатии на многострочное поле для ввода сообщения развернется в большое модальное окно. При необходимости задайте настройки пересчета блока (см. п. 6.11 ) и настройки интерактива блока с картой (см. п. 6.12 ).
Обратите внимание, что если для блока График указан слой сервиса, в котором отсутствуют данные (все атрибуты со значениями NULL или равными 0 ), то даже если для блока задан Заголовок , на интерактивной карте в окне виджета указанный блок будет скрыт по умолчанию.

Настройки ключевого поля

В параметре Ключевое поле настраивается атрибутивное поле, значения которого откладываются:
  • по горизонтальной оси - для графиков и столбчатой диаграммы;
  • по вертикальной оси - для горизонтальной диаграммы;
  • по секторам - для лепестковой диаграммы.
Также в настройках ключевого поля отображаются общие опции оформления графика или диаграммы.
В параметре Ключевое поле выберите необходимое атрибутивное поле из выпадающего списка. Можно выбрать только одно Ключевое поле .
Нажмите справа от выбранного ключевого поля и задайте следующие настройки (см. Рисунок 387 ):
  • Разместить легенду статистики - скрыть , сверху , снизу , слева , справа ;
    Опция применима к отображаемым данным.
    Выберите из выпадающего списка положение легенды графика или диаграммы. В легенде отображается цвет и название отображаемых данных (указанное Отображаемое имя или название (алиас) выбранного атрибутивного поля - см. п. 6.5.2 ).
    Если легенда не требуется, выберите скрыть .
  • Цвет подписей в легенде ;
    Опция доступна, если определено местоположение легенды (для параметра Разместить легенду статистики выбрано любое, кроме скрыть ).
    Выберите цвет подписей в легенде из палитры или задайте его шестнадцатеричный код. По умолчанию - темно-серый ( #666666 ).
  • Вертикальная шкала от нуля ;
    Опция применима ко всем добавленным полям отображаемых данных.
    По умолчанию отмечена, шкала значений отображаемых данных будет отсчитываться от ноля.
    Отключите опцию, чтобы шкала отсчитывалась от минимального значения.
  • Столбчатая диаграмма с накоплением ;
    Опция применима к отображаемым данным.
    По умолчанию отключена, в блоке формируется обычная диаграмма.
    Отметьте опцию, чтобы формировались столбчатые диаграммы с накоплением (значения разных полей отображаемых данных располагаются в рамках одного столбца друг над другом - см. подробнее п. 6.5.3.3 ).
  • Скрыть подписи на оси X ;
    Опция по умолчанию отключена, деления оси X подписаны (значения ключевого поля).
    Отметьте опцию, чтобы скрыть подписи к делениям.
  • Скрыть подсказку ;
    Опция по умолчанию отключена, при наведении на график или диаграмму всплывает подсказка со значением отображаемого поля и цветовым обозначением.
    Отметьте опцию, чтобы отключить подсказку.
  • Высота подписей по оси X ;
    При необходимости задайте высоту области отображения подписей делений оси X.
  • Ширина подписей по оси Y ;
    При необходимости задайте ширину области отображения подписей делений отображаемых данных.
  • Цвет подписей на оси X ;
    Выберите цвет подписей делений оси X из палитры или задайте его шестнадцатеричный код. По умолчанию - темно-серый ( #666666 ).
  • Цвет подписей на оси Y ;
    Выберите цвет подписей делений оси Y из палитры или задайте его шестнадцатеричный код. По умолчанию - темно-серый ( #666666 ).
  • Толщина столбца, px ;
    Опция применима к отображаемым данным.
    По умолчанию ширина столбца диаграммы динамически подстраивается под количество столбцов и ширину диаграммы.
    При необходимости задайте фиксированную ширину столбцов диаграммы в пикселях.
  • Максимальная толщина столбца, px ;
    Опция применима к отображаемым данным.
    По умолчанию ширина столбца диаграммы динамически подстраивается под количество столбцов и ширину диаграммы.
    При необходимости задайте максимальную ширину столбцов диаграммы в пикселях.
  • Заменить отображаемые значения .
    Вы можете переопределить значения делений оси X (значения ключевого поля).
    Задайте столько пар «значение-отображаемое имя», сколько требуется (см. Рисунок 388 ).
  • Рисунок 387 - Блок График. Настройки ключевого поля
  • Рисунок 388 - Переопределение значений горизонтальной оси
Обратите внимание, что в блоке График данные автоматически сортируются по ключевому полю (см. Рисунок 389 ) по возрастанию. При нечисловом ключевом поле вы можете настроить сортировку отображаемых данных (см. п. 6.5.2 ), и значения ключевого поля автоматически подстроятся под новый порядок.
Рисунок 389 - Пример автоматической сортировки атрибутивных значений ключевого поля Годы в блоке График

Настройки отображаемых данных

В параметре Название поля выберите из выпадающего списка атрибутивное поле, статистические значения которого будут отображаться на графике или диаграмме.
В легенде по умолчанию отображается алиас (если задан) или название выбранного атрибутивного поля. При необходимости переопределите название отображаемых данных в параметре Отображаемое имя .
Нажмите справа от выбранного поля и задайте следующие настройки (см. Рисунок 390 ):
  • Отображать - минимум , максимум , среднее , сумму , количество ;
    Опция определяет, какой статистический показатель будет отображаться на графике или диаграмме.
    По умолчанию выбрано сумму . Нажмите на кнопку-ссылку сумму и выберите из выпадающего списка нужный показатель.
  • Скругление ;
    Опция применима только для графиков (линейных диаграмм). Позволяет аппроксимировать отображаемые статистические значения сплайнами.
    По умолчанию отключена. Отметьте опцию, чтобы отрисовать сглаженный график (см. подробнее п. 6.5.3.1 ).
  • Округлять значение до … знака после запятой ;
    По умолчанию не заполнено (прочерк).
    Нажмите на прочерк и укажите, до какого знака после запятой следует округлять дробные значения отображаемых данных.
  • Выводить значение - как есть , в процентах , в тысячах , в гектарах , в миллионах , в миллиардах , в триллионах ;
    Опция определяет, в каких единицах будет отображаться статистический показатель на графике или диаграмме.
    По умолчанию выбрано как есть . Нажмите на кнопку-ссылку как есть и выберите из выпадающего списка нужные единицы.
    При выборе в гектарах подразумевается, что рассчитанные статистические значения в квадратных метрах.
  • Сортировка - Не задана , по возрастанию , по убыванию ;
    Опция применима к диаграммам с нечисловым ключевым полем. Определяет порядок следования отображаемых статистических значений на диаграмме.
    По умолчанию выбрано Не задана , то есть порядок определяется сортировкой значений ключевого поля.
    Выберите из выпадающего списка нужный порядок.
    Обратите внимание, что подписи по оси X подстраиваются к выбранному порядку отображения данных.
  • Количество ;
    По умолчанию на графике или диаграмме отображаются все данные.
    Задайте, для скольких значений ключевого поля отображать данные на графике или диаграмме.
  • Шаблон подсказки ;
    В параметре указывается шаблон подсказки, которая отображается при наведении на значение графика или диаграммы. Можно использовать макросы:
    • {xLabel} - значение по горизонтальной оси;
      Для ключевого поля берется значение, переопределенное в настройках ключевого поля (см. параметр Заменить отображаемые значения - п. 6.5.1 ).
    • {yLabel} - значение по вертикальной оси;
      Для ключевого поля берется значение, переопределенное в настройках ключевого поля (см. параметр Заменить отображаемые значения - п. 6.5.1 ).
    • {value} - отображаемое статистическое значение;
    • {percent} - отображаемое статистическое значение в процентах от суммы всех используемых в диаграмме значений.
  • Случайные цвета ;
    По умолчанию опция отключена, цвета для значений одного атрибутивного поля отображаются одним цветом.
    Отметьте опцию, чтобы установить разные цвета разным значениям атрибутивного поля отображаемых данных.
  • Расположение оси - Слева , Справа ;
    Опция применима только для графиков и столбчатых диаграмм. Определяет расположение оси значений для атрибутивного поля отображаемых данных. Опция позволяет отобразить одновременно два типа данных, с двумя шкалами по оси Y. Одна шкала откладывается по левой оси Y, вторая шкала - по правой оси Y (см. подробнее п. 6.5.3.2 ).
    По умолчанию выбрано расположение оси Слева . Для отображения данных другого типа по второй оси справа отметьте Справа .
  • Задать цвет для значений .
    Опция применима только при формировании диаграммы по одному набору отображаемых данных.
    По умолчанию диаграммы окрашиваются цветом, выбранным справа от кнопки настроек отображаемых данных либо случайным цветом (если отмечена опция Случайные цвета , см. выше).
    Вы можете переопределить цвета диаграммы для отдельных значений ключевого поля. Укажите значение ключевого поля и цвет из палитры (или задайте его шестнадцатеричный код).
  • Рисунок 390 - Блок График. Настройки отображаемых данных
По умолчанию значения графиков и диаграмм окрашиваются бирюзовым цветом ( #1181A6 ). Вы можете определить свой цвет для значений, нажав на цвет справа от настроек отображаемых данных. Выберите нужный цвет из палитры или задайте его шестнадцатеричный код.
На примере ниже (см. Рисунок 391 ) представлена столбчатая диаграмма с информацией о том, какое количество садов сколько групп содержит. Ключевое поле - количество групп groups_count . Атрибутивное поле отображаемых данных - oid . Для отображения значений диаграммы были использованы и заданы следующие настройки:
  • статистический показатель (параметр Отображать ) - количество ;
  • значения выведены, как есть ;
  • выведены статистические значения для первых 10 значений ключевого поля (параметр Количество );
  • настроен Шаблон подсказки с использованием макросов - {value} садов содержат по {xLabel} ;
  • отдельно заданы цвета для отображения статистического показателя по детским садам с 6 и 10 группами (параметр Задать цвет для значений ).
  • Рисунок 391 - Виджет с добавленной столбчатой диаграммой
Вы можете добавить несколько атрибутивных полей отображаемых данных. В таком случае определите для каждого атрибутивного поля свой цвет. Чтобы пользователю интерактивной карты было понятно, какой цвет представляет какие данные, разместите на диаграмме легенду (см. параметр Разместить легенду статистики в настройках ключевого поля - п. 6.5.1 ).
Обратите внимание, что пользователь может отключать отображение части данных диаграммы, нажимая на элемент легенды. При этом отключенные данные в легенде будут отображаться перечеркнутыми (см. Рисунок 392 ). Повторное нажатие включает видимость данных снова.
Рисунок 392 - Отключение видимости части данных столбчатой диаграммы

Линейная, столбчатая, горизонтальная, лепестковая диаграмма

В блоке График можно сформировать следующие типы диаграмм:
  • Линейная диаграмма (график) (см. Рисунок 393 );
    Применимо, если вам нужно показать тенденции в изменении данных за определенный период.
  • Рисунок 393 - Линейная диаграмма (график)
  • Столбчатая диаграмма (см. Рисунок 394 );
    Применимо для сравнения статистических показателей, для их сопоставления.
  • Рисунок 394 - Столбчатая диаграмма
  • Горизонтальная диаграмма ;
    Применимо, когда важны не столько значения статистического показателя, сколько названия столбцов диаграммы.
  • Рисунок 395 - Горизонтальная диаграмма
  • Лепестковая диаграмма .
    Применимо для оценки полноты данных.
  • Рисунок 396 - Лепестковая диаграмма
По умолчанию выбрана столбчатая диаграмма. Нажмите на справа от атрибутивного поля отображаемых данных и выберите подходящий тип диаграммы (см. Рисунок 397 ).
Рисунок 397 - Выбор способа визуализации в блоке График

Сглаженный график

Вы можете построить по данным график, состоящий не из линейных отрезков, а сглаженный, аппроксимированный сплайнами (см. Рисунок 398 ):
  • настройте ключевое поле (см. п. 6.5.1 );
  • настройте отображаемые данные (см. п. 6.5.2 );
  • выберите тип диаграммы Линейная диаграмма (график);
  • в настройках отображаемых данных отметьте опцию Скругление .
  • Рисунок 398 - Сглаженный график

График и столбчатая диаграмма с двумя осями Y

На графике и столбчатой диаграмме можно отобразить одновременно два типа данных, с двумя шкалами по оси Y. Одна шкала откладывается по левой оси Y, вторая шкала - по правой оси Y (см. Рисунок 359):
  • настройте ключевое поле (см. п. 6.5.1 );
  • настройте два типа отображаемых данных (см. п. 6.5.2 );
  • выберите тип диаграммы Линейная диаграмма (график) (или Столбчатая диаграмма );
  • задайте для каждого типа отображаемых данных свой цвет, нажав на цвет справа от настроек отображаемых данных;
    Выберите нужный цвет из палитры или задайте его шестнадцатеричный код.
  • в настройках отображаемых данных первого типа укажите для параметра Расположение оси - Слева (выбор по умолчанию);
  • в настройках отображаемых данных второго типа укажите для параметра Расположение оси - Справа .
  • Рисунок 399 - Столбчатая диаграмма с двумя осями Y. Шкала данных по скорости потока расположена справа

Столбчатая и горизонтальная диаграмма с накоплением

Вы можете построить также столбчатые и горизонтальные накопительные диаграммы, когда необходимо в одном столбце или ряду вывести значения из нескольких полей (см. Рисунок 400 ):
  • настройте ключевое поле (см. п. 6.5.1 );
  • настройте отображаемые данные (см. п. 6.5.2 ) - атрибутивные поля, значения которых будут накапливаться;
  • выберите тип диаграммы Столбчатая диаграмма (или Горизонтальная диаграмма );
  • задайте для каждого атрибутивного поля отображаемых данных свой цвет, нажав на цвет справа от настроек отображаемых данных;
    Выберите нужный цвет из палитры или задайте его шестнадцатеричный код.
  • в настройках ключевого поля отметьте опцию Столбчатая диаграмма с накоплением ;
  • чтобы пользователю интерактивной карты было понятно, какой цвет представляет какие данные, разместите на диаграмме легенду (см. параметр Разместить легенду статистики - п. 6.5.1 ).
  • Рисунок 400 - Горизонтальная диаграмма с накоплением

Комбинированная диаграмма

В блоке в одной координатной плоскости вы можете отобразить комбинированную диаграмму, построенную на основе значений одного ключевого поля. Такая диаграмма может состоять из линейных (графиков) и столбчатых диаграмм (см. Рисунок 401 ):
  • настройте ключевое поле (см. п. 6.5.1 );
  • настройте отображаемые данные (см. п. 6.5.2 );
  • выберите тип диаграммы Линейная диаграмма (график) или Столбчатая диаграмма для каждого атрибутивного поля отображаемых данных;
  • задайте для каждого атрибутивного поля отображаемых данных свой цвет, нажав на цвет справа от настроек отображаемых данных;
    Выберите нужный цвет из палитры или задайте его шестнадцатеричный код.
  • чтобы пользователю интерактивной карты было понятно, какой цвет представляет какие данные, разместите на диаграмме легенду (см. параметр Разместить легенду статистики - п. 6.5.1 ).
  • Рисунок 401 - Комбинированная диаграмма