Примеры форматирования

Форматирование данных, отображаемых в индикаторе

В Visiology Designer вы можете создать индикатор для вывода какой-либо значимой информации и отформатировать это значение для создания эффектной визуализации данных. Для реализации данного сценария необходимо выполнить несколько шагов:

  1. Создать индикатор на базе виджета Текст;

  2. Вывести нужное значение и отформатировать его:

    • округлить;

    • изменить цвет значения и фона;

    • разделить разряды значения для удобного восприятия.

  3. Изменить цвет значения и фона.

Шаг 1. Создание индикатора на базе виджета Текст

  1. Откройте Visiology Designer.

  2. Создайте новый дашборд или откройте существующий.

  3. Добавьте виджет Текст, нажав на его иконку:

     

  4. Перетащите данные в поле Столбцы. В нашем примере мы будем использовать данные из столбца calendarmonthlable (названия месяцев), и Продажи, т.к. мы хотим отображать данные по продажам по месяцам:

    add-data(2)(1).png

     

  5. Теперь для дальнейшей настройки виджета необходимо перейти на вкладку Оформление:

     

  6. Для завершения создания индикатора озаглавим его. Можно также изменить фон заголовка:

Шаг 2. Вывод нужного значения и его форматирование

Теперь достаточно ввести команду @col в поле Настройка текста > Текст для вывода в виджет данных всех добавленных столбцов. Но у нас другая задача. Нам нужно вывести определенное значение и отформатировать его. Для этого нам необходимо сделать следующее:

  • вывести данные, например, по февралю (вторая строка таблицы);

  • округлить значение;

  • добавить слово руб.;

  • разделить разряды значения для удобного восприятия.

Все это можно выполнить одной командой, введенной в поле Текст:

Math.round(@col[1][1]).toLocaleString('ru') + " руб."

Где
Math.round – функция округления;
@col[1][1] – ячейка с необходимым нам значением. В таблице это вторая строка во втором столбце, но мы указали 1, так как первая строка и первый столбец имеют индекс 0.
toLocaleString('ru') – преобразует числовое значение в строковое и возвращает это значение, используя указанный языковой стандарт;
+ " руб." – добавленный текст.

То же самое можно сделать и другими способами:

Math.round(@col[1][1]).toString().replace(/(?!^)(?=(?:\d{3})+(?:.|$))/gm, '')+ " руб."
или
Math.round(@col[1][1]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " " )+ " руб."

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

Шаг 3. Изменение цвета значения и фона

Теперь мы можем изменить цвет выведенного значения и фона, изменить форму и цвет рамки, добавить тень. Для этого можно воспользоваться стандартными настройками на вкладке Оформление:

Форматирование данных, отображаемых в графике

Visiology Designer позволяет гибко настраивать визуализацию отображаемых данных для фокусировки внимания на их отдельных элементах в графиках, гистограммах и т.д. В нашем примере мы будем придерживаться следующего сценария:

  • Загрузка графика с настроенными данными.

  • Форматирование значений.

    • Изменение значений по оси Y.

    • Изменение значений по оси Х.

    • Изменение значений на точках графика.

Шаг 1. Загрузка графика с настроенными данными

  1. Откройте приложение Visiology Designer.

  2. Откройте ранее созданный дашборд. В нашем примере это Отчет по продажам:

     

  3. Выберите виджет, который хотите отформатировать. В нашем примере это График:

     

  4. На вкладке Оформление озаглавим график и изменим фон заголовка:

Шаг 2. Форматирование значений

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

Начнем со значений по оси Y. В данный момент на оси отображаются четырехзначные числа, что не всегда удобно. Давайте заменим их на сокращенный вариант. Для этого введем следующую команду в поле Ось Y > Форматирование:

@value > 1000 ? @value/1000+' тыс.':@value

Где
@value > 1000 – условие, при котором значение должно быть больше тысячи (в нашем примере это все значения по оси Y);
@value/1000 – деление значения на 1000, если удовлетворяется условие;
+' тыс.' – добавление текста к значению.

Теперь заменим сокращенные названия месяцев по оси Х на полные названия. Для этого выполним следующую команду в поле Ось Х > Форматирование:

@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 = 'Январь' – замена значения новым (Январь) при удовлетворении условия;

И, наконец, расставим значения на точках и немного модифицируемым их. Для этого выполним следующие действия:

  1. Нажмите на Подписи и поставьте галочку на Подписи точек/столбцов – отобразятся значения на точках графика:

     

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

Также, с помощью настроек, можно поменять цвет фона, добавить рамку и тень:

Выравнивание подписей по центру

Для выравнивания надписей по центру в столбцах используется следующая команда:

'<div style="text-align:center">$(@value.y)</div>'

Где @value.y – значение по оси Y.

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

w.plotOptions.series.dataLabels.useHTML = true

Данный метод выравнивания работает, если в настройке столбцов включено накопление.

Подписи на разных уровнях Drill Down

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

@value + (visApi().getDrillLevel("1b21e42de7954010adf2bb71c6608764") == 0 ? "г." : (visApi().getDrillLevel("1b21e42de7954010adf2bb71c6608764") == 1 ? " квартал" : ""))

Где

  • @value - зарезервированная функция;

  • getDrillLevel - функция VisApi(), определяющая уровень детализации;

  • "1b21e42de7954010adf2bb71c6608764" - ID виджета.

Для получения ID виджета, выберите виджет и перейдите в раздел Общие настроек виджета:

Изменение формата даты в виджете

Вы можете изменить формат дат, отображаемых в виджете, с помощью команд JavaScript. Например, если при визуализации данных даты отображаются в формате mm/dd/yyyy hh:mm:ss, а вы хотели бы, чтобы они показывались в формате dd.mm.yyyy, необходимо сделать следующее:

  1. В Desktop Designer выберите необходимый виджет и перейдите на ось, где отображаются даты (например, X).

  2. В свойствах оси перейдите в поле Форматирование и введите следующую команду:
    @value.substring(3,5) + "." + @value.substring(0,2) + "." + @value.substring(6,10)
    Формат отображаемых дат изменится:


Смотрите также

Продвинутое форматирование свойств виджетов
Визуальные настройки виджетов