Сравнение версий

Версия Старая версия 1 Новая версия Текущий
Изменения, внесенные

Эдуард Столяр

Эдуард Столяр

Сохранено

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.
Выборка
hiddentrue

Сценарий 1. Форматирование данных, отображаемых в индикаторе

В

Dashboard

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

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

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

    • округлить;

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

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

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

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

Dashboard

Dasktop Designer позволяет создать индикатор на базе виджета Текст. Для этого выполните следующие шаги:

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

Dashboard

  1. Desktop Designer.

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

  3. Перейдите на вкладку Вставка и выберите виджет Текст:

Image Removed
  1. Image Added

  2. Привяжите виджет к базе данных и укажите необходимый показатель и измерение. В нашем примере это база данных ViQube и показатель Цена за единицу.
    (информация) Просмотреть загруженные данные можно нажав на кнопку Просмотр данных в виде таблицы:

    Image Modified

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

Image Removed
  1. Image Added

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

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

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

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

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

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

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

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

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

Image Removed

Image Added

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

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

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

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

Image Removed
Image Added
Сценарий 2.


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

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

  • Создание графика и привязка его к базе данныхЗагрузка графика с настроенными данными.

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

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

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

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

Шаг 1.

Создание графика и привязка его к базе данных

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

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

Dashboard

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

Image Removed

  1. Desktop Designer.

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

  • Перейдите на вкладку Вставка и выберите виджет График:

    Image Removed

  • Привяжите виджет к базе данных и укажите необходимый показатель и измерение. В нашем примере мы будем использовать базу данных ViQube.
    (информация) Просмотреть загруженные данные можно нажав на кнопку Просмотр данных в виде таблицы:

    Image Removed

    1. Откройте ранее созданный дашборд:

      Image Added

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

      Image Added

    3. На вкладке Настройки озаглавим график и изменим фон заголовка:

      Image Added

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

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

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

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

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

    Image RemovedImage Added

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

    @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 RemovedImage Added

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

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

    Image Removed
    1. Image Added

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

    Image Removed
    1. Image Added

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

    Image RemovedImage Added

    На этой странице

    toc

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

    Нужна дополнительная помощь?

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