Создание индикатора

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

Сделать это можно двумя способами:

с помощью виджета Текст;
посредством создания соответствующего пользовательского виджета.

Создание индикатора с помощью виджета Текст

Для реализации данного сценария необходимо выполнить несколько шагов:

Добавить виджет Текст на дашборд;
Вывести нужное значение и отформатировать его:
- округлить;
- изменить цвет значения и фона;
- разделить разряды значения для удобного восприятия.
Изменить цвет значения и фона.

Шаг 1. Добавление виджета Текст на дашборд

Откройте Visiology Designer.
Создайте новый дашборд или откройте существующий.
Добавьте виджет Текст, нажав на его иконку:
Перетащите данные в поле Столбцы. В нашем примере мы будем использовать данные из столбца calendarmonthlable (названия месяцев), и Продажи, т.к. мы хотим отображать данные по продажам по месяцам:
Теперь для дальнейшей настройки виджета необходимо перейти на вкладку Оформление:
Для завершения создания индикатора озаглавим его. Можно также изменить фон заголовка:

Шаг 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. Изменение цвета значения и фона

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

Создание индикатора на базе пользовательского виджета

Подробную информацию о том, как создавать пользовательский виджет см. в разделе Создание пользовательского виджета.

В нашем примере индикатор будет визуально сравнивать два значения (фактическое и плановое) и выводить фактическое значение в числовом формате.

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

На вкладке Виджет нажмите кнопку с тремя точками и щелкните Создать виджет. Откроется окно Создание виджета:
В поле Название укажите имя виджета (например, “Индикатор”).
Добавьте поле в секции Поля виджета (например, “План-факт“).
В окне JavaScript код введите следующий код:
//Первое значение в данных будет фактом и будет выступать в качестве значения для более тёмной части окружности. Второе значени в данных выступает в качестве плана //и задаёт максимальное значение на окружности (более светлая часть). w.props = { text: 'Факт', //Текст в центре круга outerRadius: '60%', //Внешний радиус круга innerRadius: '40%', //Внутренний радиус круга chartMarginTop: -100 //Отступ окружности от верхнего края } //Формируем серии const series = [{ name: 'Conversion', data: [{ color: Highcharts.getOptions().colors[0], radius: w.props.outerRadius, innerRadius: w.props.innerRadius, y: w.data.primaryData.items[0].values[0] }], }] const trackColors = Highcharts.getOptions().colors.map(color => new Highcharts.Color(color).setOpacity(0.3).get() ); Highcharts.chart(w.general.renderTo, { chart: { type: 'solidgauge', marginTop: w.props.chartMarginTop, width: null, events: { render: function () { //формирование центральной надписи. Первое значение в данных берётся как Факт. var chart = this, center = chart.series[0].center, totalText = chart.renderer.text( `${w.props.text}`, chart.chartWidth/2.4, //Смещение ширины значения в центре chart.chartHeight/2 - 70 //Смещение высоты надписи в центре ).attr({ zIndex: 10 }).add(), valueText = chart.renderer.text( `${chart.series[0].yData[0]}`, chart.chartWidth/2.3, //Смещение ширины значения в центре (chart.chartHeight/2+33) - 65 //Смещение высоты значения в центре ).attr({ zIndex: 10 }).add(); } } }, //настройки тултипа, если он включен tooltip: { enabled: false, borderWidth: 0, backgroundColor: 'none', shadow: false, style: { fontSize: '16px' }, valueSuffix: '%', pointFormat: '{series.name} ' + '{point.y}', positioner: function (labelWidth) { return { x: this.chart.chartWidth / 2.5, y: this.chart.plotHeight / 2.3 }; } }, pane: { startAngle: 0, endAngle: 360, background: [{ // Track for Conversion outerRadius: w.props.outerRadius, innerRadius: w.props.innerRadius, backgroundColor: trackColors[0], borderWidth: 0 }] }, yAxis: { min: 0, max: w.data.primaryData.items[0].values[1], lineWidth: 0, tickPositions: [] }, plotOptions: { solidgauge: { dataLabels: { enabled: false }, linecap: 'round', stickyTracking: false, rounded: true } }, series: series });
Задайте в коде требуемые настройки (см. комментарии в коде) и нажмите Готово.
Теперь достаточно перетащить необходимые колонки из панели Данные в поле виджета для визуализации данных. В нашем примере это salesamount и salesamount-plan:
Для создания эффектной визуализации вы можете прибегнуть к визуальным настройкам виджета на вкладке Оформление. Подробную информацию о том, как настраивать виджеты см. в разделе Визуальные настройки виджетов.

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

1 Создание индикатора с помощью виджета Текст
2 Создание индикатора на базе пользовательского виджета

Время чтения: 2 мин.

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

Свяжитесь с технической поддержкой.