Content Comparison

Выборка
hidden true
Сценарий 1. Форматирование данных, отображаемых в индикаторе В Desktop Designer вы можете создать индикатор для вывода какой-либо значимой информации и отформатировать это значение для создания эффектной визуализации данных. Для реализации данного сценария необходимо выполнить несколько шагов: Создать индикатор на базе виджета Текст; Вывести нужное значение и отформатировать его: округлить; изменить цвет значения и фона; разделить разряды значения для удобного восприятия. Изменить цвет значения и фона. Шаг 1. Создание индикатора на базе виджета Текст Dasktop Designer позволяет создать индикатор на базе виджета Текст. Для этого выполните следующие шаги: Откройте приложение Desktop Designer. Создайте новый дашборд или откройте существующий. Перейдите на вкладку Вставка и выберите виджет Текст: Image Removed Привяжите виджет к базе данных и укажите необходимый показатель и измерение. В нашем примере это база данных ViQube и показатель Цена за единицу. Просмотреть загруженные данные можно нажав на кнопку Просмотр данных в виде таблицы: Image Removed Для завершения создания индикатора озаглавим его. Можно также изменить фон заголовка: Image Removed Шаг 2. Вывод нужного значения и его форматирование Теперь достаточно ввести команду @value в поле Настройка текста > Текст для вывода в виджет самого первого значения таблицы. Но у нас другая задача. Нам нужно вывести определенное значение и отформатировать его. Для этого нам необходимо сделать следующее: вывести данные, например, по февралю (вторая строка таблицы); округлить значение; добавить слово руб.; разделить разряды значения для удобного восприятия. Все это можно выполнить одной командой, введенной в поле Текст: Math.round(@array[1]).toLocaleString('ru') + " руб." Где Math.round – функция округления; @array[1] – строка с необходимым нам значением. В таблице это вторая строка, но мы указали 1, так как первая строка имеет индекс 0. toLocaleString('ru') – преобразует числовое значение в строковое и возвращает это значение, используя указанный языковой стандарт; + " руб." – добавленный текст. Image Removed То же самое можно сделать и другими способами: Math.round(@value).toString().replace(/(?!^)(?=(?:\d{3})+(?:.|$))/gm, '')+ " руб." или Math.round(@array[1]).toString().replace(/\B(?=(\d{3})+(?!\d))/g, " " )+ " руб." Шаг 3. Изменение цвета значения и фона Теперь мы можем изменить цвет выведенного значения и фона, изменить форму и цвет рамки, добавить тень. Для этого можно воспользоваться стандартными настройками: Image Removed

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

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

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

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

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

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

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

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

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

   Image Removed

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

   Image Removed

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

   Image Removed

Шаг 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

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

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

   Image Removed

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

   Image Removed

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

Image Removed

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

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

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

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

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

Форматирование может применяться в следующих элементах виджета:

• Ось X

• Ось Y

• Ось Y Дополнительная

• Подписи (Подписи точек/столбцов)

• Подсказка

При работе с форматированием Оси X, Оси Y, Оси Y Дополнительной можно использовать следующую зарезервированную команду:

• @value - название (значение, если числа) точки

При работе с форматированием подписей и подсказок можно использовать следующие зарезервированные команды:

• @value.y - значение точки по оси Y

• @value.x - название точки по оси X

• @point.name - название точки на координатном пересечении

• @point.color - цвет серии

• @series.name - название серии

Примеры использования

Форматирование подписи в зависимости от серии

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

@series.name == "Прибыль" ? @value.y + " %" : @value.y

Где

• @series.name == "Прибыль" - условие, при котором названием серии является Прибыль;

• @value.y - значение по оси Y;

• + " %" - добавленный текст.

Image Added

Настройка подписей осей

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

• Ось X

• Ось Y

• Ось Y Дополнительная

Например, для изменения надписей по оси Y существующего графика мы выполним следующую команду:

@value/1000 +' млн. руб'

Где

@value/1000 - значение оси, деленное на 1000;

+' млн. руб' - добавленный текст.

Image Added

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

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

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

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

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

Image Added

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

w.plotOptions.series.dataLabels.useHTML = true

Image Added

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