AnyChart Extension для Qlik: Bullseye Chart

Основы

Скачивание и установка

Qlik Sense Desktop

Чтобы установить AnyChart Bullseye Extension в Qlik Sense Desktop, выполните следующее:

Скачайте AnyChart Bullseye Extension для Qlik Sense.
Распакуйте архив.
Откройте окно проводника Windows и перейдите в каталог Extensions Qlik Sense:
..\Users\<UserName>\Documents\Qlik\Sense\Extensions.
Скопируйте папку anychart-4x-bullseye в каталог Extensions.
Перезапустите Qlik Sense Desktop.

Qlik Sense Server

Чтобы установить AnyChart Bullseye Extension на сервер Qlik Sense,

Скачайте AnyChart Bullseye Extension для Qlik Sense.
Откройте Qlik Management Console (QMC): https://<QPS server name>/qmc
Выберите Extensions на начальной странице QMC или в выпадающем меню Start.
Нажмите Import на панели действий.
В диалоговом окне выберите загруженный архив. Оставьте поле пароля пустым.
Нажмите Open в окне проводника файлов.
Нажмите Import.

Qlik Sense Cloud

Чтобы установить AnyChart Bullseye Extension в Qlik Sense Cloud, выполните следующее:

Скачайте AnyChart Bullseye Extension для Qlik Sense Cloud.
Перейдите в Management Console:
- добавьте /console к адресу вашего тенанта: https://<your tenant address>/console
- или используйте навигационную ссылку Administration под профилем пользователя в хабе

Перейдите на страницу Extensions и нажмите Add.
В диалоговом окне выберите загруженный архив.
Нажмите 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.

Обзор

Bullseye Chart — это инструмент, который отображает точки данных в виде маркеров, распределенных по набору концентрических колец, представляющих либо порядковые категории, либо диапазоны числовых значений.

Вы можете настроить внешний вид чарта: задать цвета, настроить маркеры, легенду, оси и сетки, установить начальный угол и внутренний радиус, включить и настроить подписи, а также задать текст подсказок.

Также доступны следующие опции: интерактивность и условия вычисления.

AnyChart Bullseye Chart с легендой и подписями

Быстрый старт

Это краткое руководство объясняет, как создать базовый Bullseye Chart.

Прежде всего, добавьте пустой чарт на лист:

Перейдите в Custom objects > AnyChart на панели ресурсов.
Перетащите пустой AnyChart Bullseye чарт на лист.

Затем добавьте три измерения, первое из которых представляет номинальные категории (группы точек данных), второе — порядковые категории (названия колец), а третье — ID точек:

Перейдите в Dimensions на панели свойств.
Нажмите Add dimension и выберите измерение.
Нажмите Add dimension и выберите измерение.
Нажмите Add dimension и выберите измерение.

Базовый Bullseye Chart, созданный с помощью AnyChart Bullseye Extension для Qlik Sense

В качестве альтернативы можно добавить два измерения и одну меру, если этого требует структура ваших данных.

Обратите внимание, что вы также можете создавать измерения и меры из полей или добавлять их, нажимая кнопки на пустом чарте.

Измерения и меры

Измерения

Чтобы добавить измерение, выполните следующее:

Перейдите в Dimensions на панели свойств.
Нажмите Add dimension и выберите измерение.

В зависимости от структуры данных, вы можете добавить два или три измерения.

Меры

Чтобы добавить меру, выполните следующее:

Перейдите в Measures на панели свойств.
Нажмите Add measure и выберите меру.

В зависимости от структуры данных, вы можете добавить одну меру или создать чарт без мер.

Структуры данных

Bullseye Chart поддерживает два способа задания данных (структуры данных). Выберите тот, который лучше всего подходит для ваших данных.

3 измерения

Если вы хотите, чтобы ось Y отображала порядковые категории (названия колец), добавьте три измерения:

Первое измерение (Categories) представляет названия номинальных категорий, которые отображаются на оси X.
Второе измерение (Rings) представляет названия колец, которые отображаются на оси Y.
Третье измерение (ID) представляет ID точек данных.

Помните, что порядок категорий на оси Y определяется настройками сортировки второго измерения.

Таблица данных для AnyChart Bullseye Chart с 3 измерениями

AnyChart Bullseye Chart с 3 измерениями

2 измерения + 1 мера

Если вы хотите, чтобы ось Y отображала числовые значения, добавьте два измерения и одну меру:

Первое измерение (Categories) представляет названия номинальных категорий, которые отображаются на оси X.
Второе измерение (ID) представляет ID точек данных.
Мера (Rings) представляет числовые значения, которые отображаются на оси Y.

Обратите внимание, что когда ось Y отображает числовые значения, можно установить тип шкалы (линейную или логарифмическую).

Таблица данных для AnyChart Bullseye Chart с 2 измерениями и 1 мерой

AnyChart Bullseye Chart с 2 измерениями и 1 мерой

Внешний вид

Цвета

AnyChart Bullseye поддерживает различные способы раскраски маркеров чарта.

Один из цветовых режимов (By dimension) также влияет на легенду. Кроме того, в зависимости от режима, легенда может быть доступна или нет.

Чтобы выбрать цветовой режим:

Перейдите в Appearance > Colors and legend на панели свойств.
Переключите ползунок Colors.
Выберите цветовой режим из выпадающего меню.

Следующая таблица объясняет разницу между различными режимами и перечисляет настройки, доступные для каждого из них:

Цветовой режим	Описание	Настройки
Single color	Один цвет применяется ко всем маркерам. Легенда недоступна.	Color Opacity
By dimension	Маркеры раскрашиваются с помощью встроенной палитры. Ее цвета указывают на значения выбранного измерения. Легенда автоматически генерируется и раскрашивается.	Select dimension Выбор палитры Reverse colors Opacity
By expression	Если структура данных чарта включает меру, вы можете раскрасить маркеры по выражению. Легенда доступна, но вам придется вручную добавлять и раскрашивать каждый элемент.	Expression

Один цвет

Вы можете установить один цвет, который применяется ко всем маркерам:

Перейдите в Appearance > Colors and legend на панели свойств.
Переключите ползунок Colors.
Выберите Single color из выпадающего меню.
Используйте опции Color и Opacity.

В этом режиме легенда недоступна.

Bullseye Chart с маркерами, окрашенными в один цвет

Цвет по измерению

Вы можете использовать встроенные палитры для раскраски маркеров по любому измерению (в зависимости от структуры данных, их может быть два или три):

Перейдите в Appearance > Colors and legend на панели свойств.
Переключите ползунок Colors.
Выберите By dimension из выпадающего меню.
Выберите измерение в выпадающем меню Select dimension.
Выберите палитру и используйте опции Reverse colors и Opacity.

Легенда автоматически генерируется и раскрашивается. Однако вы всегда можете отключить или настроить ее при необходимости.

На этом скриншоте маркеры и легенда окрашены по первому измерению:

Bullseye Chart, окрашенный по первому измерению

Здесь маркеры и легенда окрашены по второму измерению:

Bullseye Chart, окрашенный по второму измерению

Цвет по выражению

Если структура данных чарта включает меру, вы можете раскрасить маркеры по выражению:

Перейдите в Appearance > Colors and legend на панели свойств.
Переключите ползунок Colors.
Выберите By expression из выпадающего меню.
Введите выражение в поле ввода Expression.

Кроме того, форму маркеров также можно задать условно. Легенда доступна, но вам придется вручную добавлять и раскрашивать каждый элемент.

Раскраска по выражению задает цвета с помощью определяемого пользователем выражения. При раскраске по выражению вы можете определить как цвета, так и значения, с которыми они будут использоваться, что обеспечивает больший контроль над использованием цветов в визуализации. Например, вы можете выделить представляющие интерес значения или разделить значения в разных диапазонах. Раскраску по выражению также можно использовать для раскраски визуализации по значениям, не включенным в нее, например, для раскраски маркеров по альтернативным мерам или измерениям.

Примеры

Вот несколько примеров того, что можно сделать с помощью выражений для цвета. Обратите внимание, что выражения не влияют на легенду, поэтому в данных примерах она настраивается вручную.

Пример: Раскраска по мере

If(Price < 1, 'green',
If(Price < 100, 'gold',
If(Price < 1000, 'orange', 
If(Price >= 1000, 'red'))))

В этом примере 4 цвета указывают на 4 диапазона меры, отображаемой на оси Y (цена).

Bullseye Chart, окрашенный по выражению (по мере)

Пример: Раскраска по альтернативной мере

If(EstimatedCompletionTime < 4, 'red',
If(EstimatedCompletionTime < 8, 'orange',
If(EstimatedCompletionTime >= 8, 'green')))

В этом примере 3 цвета указывают на 3 диапазона оценочного времени завершения. Однако на оси Y отображается другая мера — цена.

Bullseye Chart, окрашенный по выражению (по альтернативной мере)

Пример: Раскраска по альтернативному измерению

If(Type = 'Antibiotic', 'green',
If(Type = 'Antiviral', 'orange',
If(Type = 'Analgesic', 'blue',
If(Type = 'Anticancer', 'red'))))

В этом примере 4 цвета различают маркеры, принадлежащие 4 разным группам (типы лекарств). На оси X отображаются другие группы (страны).

Bullseye Chart, окрашенный по выражению (по альтернативному измерению)

Маркеры

Тип и размер

Чтобы настроить маркеры, перейдите в Appearance > Colors and legend на панели свойств, переключите ползунок Colors и выполните следующее:

Чтобы установить размер, используйте опцию Size.
Чтобы задать тип, переключите ползунок Marker shape и выберите встроенный значок (форму) в выпадающем меню ниже.
Чтобы установить маркеры в виде пользовательского изображения, введите ссылку на изображение в поле ввода Image URL.

Вот один из встроенных значков:

Bullseye Chart с маркерами, установленными в виде одной из встроенных фигур

Тип по выражению

Вы можете добавить пользовательское выражение, назначающее различные встроенные значки разным маркерам. Эта опция доступна, когда маркеры раскрашены по выражению. Чтобы использовать ее:

Перейдите в Appearance > Colors and legend на панели свойств.
Переключите ползунок Marker shape.
Введите выражение в поле ввода Marker shape expression.

В выражении вам следует ссылаться на значки по их именам:

	`'circle'`		`'cross'`
	`'diamond'`		`'diagonal-cross'`
	`'square'`		`'star4'`
	`'line'`		`'star5'`
	`'trapezium'`		`'star6'`
	`'pentagon'`		`'star7'`
	`'arrowhead'`		`'star10'`
	`'triangle-down'`		`'arrow-down'`
	`'triangle-up'`		`'arrow-up'`
	`'triangle-left'`		`'arrow-left'`
	`'triangle-right'`		`'arrow-right'`

В примере ниже цвета и фигуры представляют разные диапазоны меры, отображаемой на оси Y (цена). Для задания фигур используется следующее выражение:

If(Price < 1, 'triangle-up',
If(Price < 100, 'diamond',
If(Price < 1000, 'cross', 
If(Price >= 1000, 'star4'))))

Bullseye Chart с маркерами, установленными в виде различных встроенных фигур

Выражение, определяющее фигуры, не обязательно должно быть похоже на выражение, определяющее цвета. Например, здесь цвета представляют меру, отображаемую на оси Y (цена), а фигуры представляют измерение, отображаемое на оси X (страна):

If(Country = 'China', 'triangle-up',
If(Country = 'Germany', 'cross',
If(Country = 'USA', 'star4')))

Bullseye Chart с маркерами, установленными в виде различных встроенных фигур

Легенда

Когда чарт раскрашен по измерению, легенда автоматически генерируется и раскрашивается. Однако вы можете отключить или настроить ее.

Когда чарт раскрашен по выражению, легенда доступна, но вам придется вручную добавлять и раскрашивать каждый элемент.

Чтобы настроить легенду, перейдите в Appearance > Colors and legend на панели свойств и выполните следующее:

Чтобы включить или отключить, переключите ползунок Legend.
Чтобы установить положение, выберите Top, Right, Bottom или Left в выпадающем меню Position.
Чтобы установить выравнивание, выберите один из доступных вариантов в выпадающем меню Alignment.
Чтобы задать заголовок, перейдите в Title и введите текст в поле ввода Title.
Чтобы настроить шрифт заголовка, используйте опции Style, Color, Size, Family и Shadow.

Чтобы добавить новый элемент легенды:

Перейдите в Items и переключите ползунок Items (если он есть).
Нажмите Add legend item.
Введите имя элемента в поле ввода Label.
Чтобы установить цвет, используйте опцию Color.

Пользовательские элементы заменяют автоматически сгенерированные.

На этом скриншоте чарт раскрашен по второму измерению, показана автоматически сгенерированная легенда, ее положение и заголовок настроены:

Bullseye Chart, раскрашенный по второму измерению, с настроенной легендой

Здесь чарт раскрашен по выражению, и в легенде отображаются пользовательские элементы, ее положение и заголовок настроены:

Bullseye Chart, раскрашенный по выражению, с настроенной легендой

Оси

Ось X

Ось X отображает названия номинальных категорий (первое измерение в любой структуре данных).

Чтобы настроить ось X, перейдите в Appearance > X-axis на панели свойств и выполните следующее:

Чтобы отключить или включить подписи, переключите ползунок Labels.
Чтобы настроить обводку, перейдите в Line и используйте опции Line, Color и Style.
Чтобы настроить сетку X, переключите ползунок Grid и используйте параметры ниже.

Два Bullseye Chart с настроенными осями X.

Ось Y

В зависимости от структуры данных, ось Y отображает либо порядковые категории (названия колец), либо числовые значения (соответствующие мере).

На положение оси Y влияет начальный угол чарта.

Чтобы настроить ось Y, перейдите в Appearance > X-axis на панели свойств и выполните следующее:

Чтобы отключить или включить подписи, переключите ползунок Labels.
Чтобы настроить обводку, перейдите в Line и используйте опции Line, Color и Style.
Чтобы настроить сетку Y, переключите ползунок Grid и используйте параметры ниже.

Два Bullseye Chart с настроенными осями Y.

Также, чтобы установить тип шкалы Y:

Перейдите в Scale type.
Выберите Linear или Logarithmic в выпадающем меню.

Помните, что эта опция доступна только тогда, когда ось Y отображает числовые значения. Вам может понадобиться использовать тип шкалы Logarithmic, если диапазон значений очень широк.

Два Bullseye Chart, где оси Y представляют линейную и логарифмическую шкалы.

Сетки

Bullseye Chart имеет две сетки:

Сетка X пересекает ось X и делит чарт на секторы.
Сетка Y пересекает ось Y и делит чарт на кольца.

Два Bullseye Chart с выделенными сетками X и Y.

Чтобы настроить сетку, перейдите в Appearance > X-axis или Y-axis на панели свойств, переключите ползунок Grid и выполните следующее:

Чтобы настроить обводку, перейдите в Line и используйте опции Line, Color и Style.
Чтобы настроить заливку, прокрутите вниз, выберите тип заливки в выпадающем меню и используйте доступные параметры ниже.

Сетки X и Y поддерживают различные схемы заливки и настройки:

Сетка	Тип заливки	Описание	Настройки
X, Y	None	К сетке не применяются цвета.	N/A
X, Y	Solid	Один цвет применяется ко всей сетке.	Color Opacity
X, Y	Odd / Even	Два цвета обозначают нечетные и четные кольца.	Odd color, Opacity Even color, Opacity
X	Palette	Секторы раскрашиваются с помощью встроенной палитры.	Выбор палитры Reverse colors Opacity
Y	Gradient	Кольца раскрашиваются с помощью двухцветного ступенчатого градиента.	Inner color Outer color Opacity

Можно комбинировать типы заливки, применяя разные схемы к разным сеткам. На скриншотах ниже показано большинство заливок и их комбинаций:

Четыре Bullseye Chart с раскрашенными сетками.

Четыре Bullseye Chart с раскрашенными сетками.

Начальный угол

Вы можете отрегулировать начальный угол чарта, что влияет на ориентацию чарта и положение оси Y:

Перейдите в Appearance > Presentation на панели свойств.
Используйте опцию Start angle.

По умолчанию начальный угол равен 0°.

Три Bullseye Chart с различными настройками начального угла

Внутренний радиус

Вы можете отрегулировать внутренний радиус чарта, чтобы задать размер свободного пространства в центре:

Перейдите в Appearance > Presentation на панели свойств.
Используйте опцию Inner radius.

По умолчанию внутренний радиус равен 0%: центр занят внутренним кольцом, и свободного места не остается.

Два Bullseye Chart с различными настройками внутреннего радиуса

Подписи

Подписи (labels) — это текстовые объекты, которые связаны с маркерами и отображают дополнительную информацию о точках данных, которые они представляют.

По умолчанию на чарте нет подписей, но вы можете включить и настроить их. Перейдите в Appearance > Labels на панели свойств и выполните следующее:

Чтобы включить или отключить, переключите ползунок Labels.
Чтобы задать текст, переключите ползунок Text и введите строковое значение или строковое выражение в поле ввода.
Чтобы настроить фон, переключите ползунок Background и используйте опции Fill, Opacity, Corner type, Border type и Border radius.
Чтобы настроить шрифт, переключите ползунок Font и используйте опции Style, Color, Size, Family и Shadow.
Чтобы установить лимит символов, переключите ползунок Character limit и введите число в поле ввода.

В примере ниже подписи отображают следующее выражение:

If(Price >= 1000, Drug & Chr(10) & '$' & Round(Price), ' ')

Bullseye Chart с настроенными подписями

Подсказки

Подсказки (tooltips) — это текстовые блоки, которые появляются при наведении курсора на маркеры. Вы можете задать пользовательский текст подсказки.

Обратите внимание, что текст подсказки можно задать как в виде строкового значения, так и в виде произвольного строкового выражения. Использование выражений позволяет выделять представляющие особый интерес значения, отображать значения, не включенные в визуализацию, результаты вычислений и так далее.

Также в подсказках можно использовать HTML.

Чтобы отключить или включить подсказки, перейдите в Interactivity на панели свойств и переключите ползунок Tooltips.

Чтобы настроить текст подсказки:

Перейдите в Appearance > Tooltips на панели свойств.
Переключите ползунок Tooltip text.
Введите строковое значение или строковое выражение в поле ввода.

Вот пример выражения для настройки текста подсказки:

'<b>' & Upper(Drug) & '</b>'&
'<br><i>' & Type & '</i>' &
'<hr>Stage: ' & Phase &
'<br>Estimated Price: $' & Price

Bullseye Chart с подсказкой, отображающей пользовательский текст

Другие функции

Интерактивность

По умолчанию доступны следующие функции интерактивности: выделение (selection), снимки (snapshots) и подсказки. Чтобы отключить или включить их, перейдите в Interactivity на панели свойств и переключите следующие ползунки:

Selection
Snapshots
Tooltips

Условия вычисления

AnyChart поддерживает условия вычисления: вы можете задать условие, которое должно быть выполнено (true), чтобы объект отобразился. Если условие не выполнено, отображается пользовательское сообщение.

Условие вычисления полезно, когда чарт или таблица очень велики, что замедляет отклик визуализации. Условие вычисления может помочь, например, сделать так, чтобы объект не отображался до тех пор, пока пользователь не отфильтрует данные до более приемлемого уровня, применяя выборки.

Чтобы добавить условие, выполните следующее:

Перейдите в Add-ons > Data handling на панели свойств.
Введите выражение в поле ввода Calculation condition.
Введите строковое значение или строковое выражение в поле ввода Displayed message.

Например, следующее выражение позволяет показывать чарт только тогда, когда пользователь выбирает менее 10 элементов данных:

If(Count(Drug) < 10, 1, 0)

Если элементов слишком много, AnyChart отображает следующее сообщение:

'There are too many items (' & Count(Drug) & ').'

Bullseye Chart с условием вычисления

Zielscheibendiagramm

Zielscheibendiagramm