Сравнение версий
Версия | Старая версия 5 | Новая версия 6 |
---|---|---|
Изменения, внесенные | ||
Сохранено |
Ключ
- Эта строка добавлена.
- Эта строка удалена.
- Изменено форматирование.
hidden | true |
---|
Сценарий 1. Форматирование данных, отображаемых в индикаторе
Якорь | ||||
---|---|---|---|---|
|
В Visiology Designer вы можете создать индикатор для вывода какой-либо значимой информации и отформатировать это значение для создания эффектной визуализации данных. Для реализации данного сценария необходимо выполнить несколько шагов:
Создать индикатор на базе виджета Текст;
Вывести нужное значение и отформатировать его:
округлить;
изменить цвет значения и фона;
разделить разряды значения для удобного восприятия.
Изменить цвет значения и фона.
Шаг 1. Создание индикатора на базе виджета Текст
Dasktop Designer позволяет создать индикатор на базе виджета Текст. Для этого выполните следующие шаги:
Откройте приложение DesktopОткройте Visiology Designer.
Создайте новый дашборд или откройте существующий.
Добавьте виджет Текст, нажав на его иконку в панели Визуализации:

Image Added
Перетащите данные в поле Столбцы. В нашем примере


мы будем использовать данные из столбца calendaryearlable (года), и Продажи, т.к. мы хотим отображать данные по продажам по годам:
Image Added
Теперь для дальнейшей настройки виджета необходимо перейти на вкладку Настройки в панели Визуализации:
Image Added
Для завершения создания индикатора озаглавим его. Можно также изменить фон заголовка:

Image Added
Шаг 2. Вывод нужного значения и его форматирование
Теперь достаточно ввести команду @value
в поле Настройка текста > Текст для вывода в виджет самого первого значения таблицы. Но у нас другая задача. Нам нужно вывести определенное значение и отформатировать его. Для этого нам необходимо сделать следующее:
вывести данные, например, по февралю (вторая строка таблицы);
округлить значение;
добавить слово руб.;
разделить разряды значения для удобного восприятия.
Все это можно выполнить одной командой, введенной в поле Текст:
Math.round(@array[1]).toLocaleString('ru') + " руб."
Где Math.round
– функция округления;@array[1]
– строка с необходимым нам значением. В таблице это вторая строка, но мы указали 1, так как первая строка имеет индекс 0.toLocaleString('ru')
– преобразует числовое значение в строковое и возвращает это значение, используя указанный языковой стандарт;+ " руб."
– добавленный текст.


То же самое можно сделать и другими способами:
Math.round(@value).toString().replace(/(?!^)(?=(?:\d{3})+(?:.|$))/gm, '')+ " руб."
илиMath.round(@array[1]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " " )+ " руб."
Шаг 3. Изменение цвета значения и фона
Теперь мы можем изменить цвет выведенного значения и фона, изменить форму и цвет рамки, добавить тень. Для этого можно воспользоваться стандартными настройками:


Сценарий 2. Форматирование данных, отображаемых в графике
Desktop Visiology Designer позволяет гибко настраивать визуализацию отображаемых данных для фокусировки внимания на их отдельных элементах в графиках, гистограммах и т.д. В нашем примере мы будем придерживаться следующего сценария:
Загрузка графика с настроенными данными.
Форматирование значений.
Изменение значений по оси Y.
Изменение значений по оси Х.
Изменение значений на точках графика.
Шаг 1. Загрузка графика с настроенными данными
Откройте приложение Desktop Visiology Designer.
Откройте ранее созданный дашборд. В нашем примере это Отчет по продажам:
Image Removed
Image Added
Выберите виджет, который хотите отформатировать. В нашем примере это График:
Image Removed
Image Added
На вкладке Настройки озаглавим график и изменим фон заголовка:
Image Removed
Image Added
Шаг 2. Форматирование значений
Теперь мы можем как угодно видоизменять значения графика, чтобы сделать его более информативным и удобным для просмотра.
Начнем со значений по оси Y. В данный момент на оси отображаются четырехзначные числа, что не всегда удобно. Давайте заменим их на сокращенный вариант. Для этого введем следующую команду в поле Ось Y > Форматирование:
@value > 1000 ? @value/1000+' тыс.':@value
Где@value > 1000
– условие, при котором значение должно быть больше тысячи (в нашем примере это все значения по оси Y);@value/1000
– деление значения на 1000, если удовлетворяется условие;+' тыс.'
– добавление текста к значению.Image Removed

Теперь заменим сокращенные названия месяцев по оси Х на полные названия. Для этого выполним следующую команду в поле Ось Х > Форматирование:
@value == 'Янв' ? @value = 'Январь' :@value && @value == 'Фев' ? @value = 'Февраль':@value && @value == 'Мар' ? @value = 'Март' :@value &&@value == 'Апр' ? @value = 'Апрель' :@value &&@value == 'Май' ? @value = 'Май' :@value &&@value == 'Июн' ? @value = 'Июнь' :@value &&@value == 'Июл' ? @value = 'Июль' :@value &&@value == 'Авг' ? @value = 'Август' :@value
Где @value == 'Янв'
– условие, при котором значение должно быть Янв
;@value = 'Январь'
– замена значения новым (Январь
) при удовлетворении условия;


И, наконец, расставим значения на точках и немного модифицируемым их. Для этого выполним следующие действия:
Нажмите на Подписи и поставьте галочку на Подписи точек/столбцов – отобразятся значения на точках графика:
Image Removed
Image Added
Теперь выделим значения жирным и добавим к ним слово шт. Для этого воспользуемся следующей командой:
'<b>'+@value.y + '</b>' + ' шт.'
Где'<b>'+@value.y + '</b>'
- все значения по оси Y, обрамленные HTML тэгами, которые делают текст жирным;' шт.'
– добавленный текст.Image Removed
Image Added
Также, с помощью настроек, можно поменять цвет фона, добавить рамку и тень:


На этой странице
Форматирование данных, отображаемых в графике
Оглавление | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
Нужна дополнительная помощь?