Круговой индикатор
Документация Circular Gauge
Table of contents
Circular Gauge Extension для Qlik
Загрузка и установка
Qlik Sense Desktop
Чтобы установить Circular Gauge Extension в Qlik Sense Desktop, выполните следующие действия:
- Скачайте Circular Gauge Extension для Qlik Sense.
- Распакуйте архив.
- Откройте окно проводника Windows и перейдите в директорию расширений Qlik Sense:
..\Users\<UserName>\Documents\Qlik\Sense\Extensions. - Скопируйте папку anychart-4x-circular-gauge в директорию Extensions.
- Перезапустите Qlik Sense Desktop.
Qlik Sense Server
Чтобы установить Circular Gauge Extension на сервер Qlik Sense,
- Скачайте Circular Gauge Extension для Qlik Sense.
- Откройте Qlik Management Console (QMC): https://<QPS server name>/qmc
- Выберите Extensions на начальной странице QMC или в выпадающем меню Start.
- Нажмите Import на панели действий.
- В диалоговом окне выберите загруженный архив. Оставьте поле пароля пустым.
- Нажмите Open в окне проводника файлов.
- Нажмите Import.
Qlik Sense Cloud
Чтобы установить Circular Gauge Extension в Qlik Sense Cloud, выполните следующие действия:
- Скачайте Circular Gauge Extension для Qlik Sense Cloud.
- Распакуйте архив.
- Перейдите в Management Console:
- добавьте /console к адресу вашего тенанта: https://<your tenant address>/console
- или используйте навигационную ссылку Administration в профиле пользователя в хабе
- Перейдите на страницу Extensions и нажмите Add.
- В диалоговом окне выберите архив с расширением в бандле — например, anychart-4x-circular-gauge.zip.
- Нажмите Add.
- Повторите вышеуказанные шаги, чтобы добавить другие расширения.
- В Management Console перейдите в раздел Content Security Policy и нажмите Add.
- В диалоговом окне дайте имя для Content Security Policy — например, AnyChart.
- Введите адрес исходного сервера: qlik.anychart.com
- Выберите следующие директивы:
- connect-src
- font-src
- img-src
- script-src
- style-src
- Нажмите Add.
Обзор
Circular Gauge Extension от AnyChart для Qlik предоставляет компактную, высоконастраиваемую визуализацию для отображения KPI в радиальном макете. Идеально подходящий для дашбордов, где важна экономия пространства, этот gauge может отображать одно или несколько значений с помощью указателей — каждый из которых представляет собой один агрегированный measure или разбивку по dimension.
Вы можете настроить широкий спектр визуальных и поведенческих опций, чтобы адаптировать диаграмму под ваши нужды. Определите точный макет, используя Axis Settings , включая radius и swipe angle , кастомные start angles , а также статические или динамические диапазоны значений. Добавляйте Reference Lines и Reference Ranges , чтобы выделить ключевые пороговые значения и создать интуитивно понятные зоны внутри gauge.
Диаграмма поддерживает Text и Image Labels , что позволяет легко включать контекстную информацию или брендинг непосредственно в область gauge. Используйте настройки Presentation для точной настройки структурных деталей, таких как cap , frame и adaptive mode , который обеспечивает читаемость диаграммы даже при небольших размерах.
Кроме того, раздел Colors и Legend позволяет применять кастомную логику раскрашивания — по dimension, measure или выражению — и настраивать легенды для улучшения читаемости. В сочетании эти функции делают Circular Gauge универсальным выбором для отслеживания отдельных метрик или сравнения нескольких KPI с одного взгляда.
Quick Start
Этот краткий учебник объясняет, как создать базовый Circular Gauge .
Прежде всего, добавьте пустую диаграмму на ваш лист:
- Перейдите в Custom objects > AnyChart на панели ресурсов.
- Перетащите пустую диаграмму AnyChart Circular Gauge на лист.
Затем добавьте measure для представления значения KPI:
- Перейдите в Measures на панели свойств.
- Нажмите Add Measure и выберите измерение.
(Опционально) Добавьте dimension, чтобы разделить measure на несколько указателей:
- Перейдите в Dimensions на панели свойств.
- Нажмите Add Dimension и выберите измерение.
Обратите внимание, что вы также можете создавать измерения и меры из полей или добавлять их, нажимая на кнопки на пустой диаграмме.
Dimension и Measure
Measure
Чтобы добавить measure, выполните следующие действия:
- Перейдите в Measures на панели свойств.
- Нажмите Add measure и выберите measure.
Circular Gauge может отображать один measure без каких-либо dimensions. В этом случае диаграмма показывает один указатель, представляющий общее агрегированное значение. Однако при добавлении dimension measure разбивается по значениям dimension — каждое значение затем отображается как отдельный указатель на gauge.
Dimension
Чтобы добавить dimension, выполните следующие действия:
- Перейдите в Dimensions на панели свойств.
- Нажмите Add dimension и выберите dimension.
Добавление dimension разделяет measure по его отдельным значениям. Каждое значение dimension представлено отдельным указателем на gauge, что позволяет сравнивать одну и ту же метрику (например, Profit) по нескольким категориям (например, Sales Channels). Это превращает gauge в сравнительную визуализацию, сохраняя при этом компактный вид одной метрики.
Axis Settings
Панель Axis settings позволяет контролировать поведение и внешний вид оси gauge, включая ее размер, sweep angle, диапазон шкалы и начальное положение.
Radius и Swipe Angle
- Axis radius – контролирует общий размер дуги gauge относительно области диаграммы. Значение устанавливается в процентах.
- Axis swipe angle – определяет ширину дуги gauge (например, полный круг — 360°, полукруг — 180° и т. д.). Вы можете использовать это, чтобы вписать gauge в узкие макеты или компактные дашборды.
Start Angle
По умолчанию gauge начинается с axis swipe angle (режим Auto), но включение Custom позволяет указать точный угол (в градусах) для начала дуги.
Range
Диапазон оси определяет минимальное и максимальное значения, отображаемые на gauge. В режиме Auto диаграмма вычисляет это на основе значений measure. Переключение на Custom позволяет определить:
- Mode – выберите между Min, Max или Min/Max
- Min / Max – введите статические значения или выражения Qlik для установки динамических границ
Это полезно для нормализации gauge на нескольких диаграммах или выделения конкретных порогов.
Styling
Подраздел Styling включает переключатели для отображения и настройки:
- Major ticks
- Minor ticks
- Axis line
- Labels
Каждый переключатель можно развернуть для доступа к более детальным настройкам внешнего вида, таким как цвет, шрифт, размер и видимость.
Reference Lines и Ranges
Reference lines и ranges позволяют выделять ключевые пороги или важные сегменты на gauge. Эти визуальные маркеры поддерживают статические значения или динамические выражения и могут быть полностью стилизованы и снабжены метками.
Все параметры конфигурации можно найти в Properties Panel → Add-ons .
Reference Lines
Reference Line отображается в виде тонкой линии поперек шкалы gauge, отмечая определенное значение — часто используется для указания порога или цели — и с применением стилизации меток она может давать четкие контекстные подсказки, такие как «Цель» или «Предупреждение», расположенные точно вдоль дуги (как показано ниже).
Чтобы добавить reference line, перейдите в Add-ons → Reference line и нажмите кнопку Add.
Это создаст новую reference line с множеством настроек для конфигурации ее внешнего вида, положения и метки.
Основные настройки включают:
- Label
- Value
- Color
- Single Color
- By expression
- Style
- Solid
- Dashed
- Dotted
- Thickness
- Position
- Inside
- Outside
- Height
Кроме того, включение флажка Show label открывает дополнительные параметры конфигурации для метки reference line:
- Label position
- Align
- Start
- Center
- End
- Direction
- Horizontal
- Radial
- Arc
- Переключатель Font settings
- Font Style
- Font Color
- Переключатель Auto font size
- Font size
- Font Family
Чтобы удалить reference line, нажмите кнопку Delete в нижней части блока настроек этой reference line.
Reference Ranges
Reference Range отображается как цветной сегмент дуги вдоль шкалы gauge. Он визуально выделяет диапазон значений и, будучи настроенным с меткой, добавляет дополнительный контекст, такой как пороги или целевые зоны. Например, желтая дуга с меткой «Reference Range Label», охватывающая 40–90%, создает интуитивно понятную зону акцента на gauge (как показано ниже).
Чтобы добавить Reference Range — перейдите в Add-ons → Reference Range и нажмите кнопку Add.
Это создаст новый Reference Range с несколькими полями настроек для конфигурации внешнего вида, положения и маркировки диапазона.
Основные настройки включают:
- Label
- Start value
- End value
- Color
- Single color
- By expression
- Stroke thickness up/down
- Stroke thickness left/right
- Stroke color
- Opacity
- Start height
- End height
- Offset
- Position
- Inside
- Outside
Как и в случае с Reference Lines, вы можете включить флажок Show label, чтобы настроить метку для этого диапазона со следующими параметрами:
- Label position
- Align
- Start
- Center
- End
- Direction
- Horizontal
- Radial
- Arc
- Переключатель Font settings
- Font Style
- Font Color
- Переключатель Auto font size
- Font size
- Font Family
Чтобы удалить Reference Range, нажмите кнопку Delete в нижней части его блока настроек.
Labels
Labels — это самостоятельные элементы, которые можно разместить в любом месте gauge. Они полезны для отображения дополнительного статического контента, такого как подписи, KPI, декоративные маркеры или логотипы. В отличие от reference lines и ranges, метки не привязаны к конкретным значениям или шкале — они свободно плавают в пространстве gauge.
Для каждой метки можно установить один из двух типов: Text или Image. В зависимости от выбранного типа доступны различные параметры конфигурации.
Тип Text
Когда выбран тип Text, доступны следующие настройки:
- Label
- Text
- Number formatting
- Font style
- Font color
- Auto font size toggle
- Font size
- Font family
- Use container bounds
- Vertical position
- Horizontal position
- Display above
Тип Image
Когда выбран тип Image, доступны следующие настройки:
- Label
- URL
- Size
- Use container bounds
- Vertical position
- Horizontal position
- Display above
Presentation
Раздел Presentation определяет, как диаграмма структурирована визуально и как ее элементы отображаются в доступном пространстве. Он содержит настройки для cap, frame, анимаций и adaptive mode.
Эти настройки можно найти в Properties Panel → Appearance → Presentation .
Styling
Раздел Styling позволяет настраивать заголовок, подзаголовок, сноску и цвет фона диаграммы.
По умолчанию параметры стиля находятся в режиме Auto. Переключитесь на Custom для доступа к следующим настройкам:
- Title
- Subtitle
- Footnote
- Background color
Переключите тумблеры с Auto на Custom, чтобы увидеть расширенные настройки для каждого пункта.
Cap
Cap — это круглая фигура, отображаемая у основания указателя. Чтобы включить его, активируйте переключатель Show cap. После включения становятся доступны следующие параметры настройки:
- Fill
- Outline
Размер cap рассчитывается автоматически на основе размеров диаграммы.
Frame
Frame — это декоративный контур, который обволакивает всю диаграмму. Чтобы включить его, активируйте переключатель Show frame. После включения появляются следующие настройки:
- Frame color
- Frame thickness
- Frame shape
- Basic
- Smooth
- Circle
Adaptive mode
Adaptive mode позволяет Circular Gauge функционировать как компактный индикатор, сводя к минимуму визуальные элементы для отображения только самых важных частей диаграммы. Это полезно при встраивании диаграммы в ограниченное пространство или использовании ее в качестве минималистичного виджета KPI.
Чтобы включить adaptive mode, перейдите в Presentation → Adaptive mode и установите флажок. Когда он активен, диаграмма автоматически корректирует свой макет в соответствии с доступным пространством, сохраняя видимость критически важных компонентов.
Если adaptive mode отключен, становится доступным поле ввода Font size. Эта настройка действует как множитель для размеров меток по умолчанию, позволяя вручную точно настраивать масштабирование шрифта и сохранять единообразный внешний вид при разных размерах диаграммы.
Colors и Legend
Этот раздел позволяет управлять логикой раскрашивания и видимостью легенды элементов диаграммы Circular Gauge.
Colors
По умолчанию настройки цвета применяются автоматически. Чтобы настроить раскрашивание, переключите параметр Colors на Custom .
После включения становятся доступны следующие опции:
- Coloring – определяет логику раскрашивания:
- Single color
- By dimension
- By measure
- By expression
- Library colors – при включении используются цвета приложения по умолчанию. При выключении доступны следующие опции:
- Color scheme
- Sequential Gradient
- Sequential Classes
- Diverging Gradient
- Diverging Classes
- Reverse colors
- Fill opacity
Legend
Legend помогает идентифицировать элементы диаграммы, отображая связанные метки и цвета. Вы можете включить ее с помощью переключателя Legend в разделе Colors и Legend.
Легенда доступна только если вы добавили Dimension .
После включения становятся доступны следующие настройки:
- Legend position
- Auto
- Right
- Bottom
- Left
- Top
- Show legend title
- Text
- Items – переключитесь с Auto на Custom для ручной настройки элементов легенды. Ручная настройка элементов позволяет полностью контролировать метки и цвета.
Если переключатель Legend выключен, все связанные параметры конфигурации будут скрыты.