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

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

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

• с помощью виджета Текст;

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

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

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

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

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

   • округлить;

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

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

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

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

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

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

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

   Open

   

    

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

   Open

   

    

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

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

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

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

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

1. На вкладке Виджет нажмите кнопку с тремя точками и щелкните Создать виджет. Откроется окно Создание виджета:
   
   

2. В поле Название укажите имя виджета (например, “Индикатор”).

3. Добавьте поле в секции Поля виджета (например, “План-факт“).

4. В окне 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( `<span style="font-size: 3em">${w.props.text}</span>`, chart.chartWidth/2.4, //Смещение ширины значения в центре chart.chartHeight/2 - 70 //Смещение высоты надписи в центре ).attr({ zIndex: 10 }).add(), valueText = chart.renderer.text( `<span style="font-size: 3em; color: ${w.colors[0]}; font-weight: bold; margin-top: 10px">${chart.series[0].yData[0]}</span>`, 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}<br>' + '<span style="font-size: 2em; color: {point.color}; ' + 'font-weight: bold">{point.y}</span>', 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 });

    

5. Задайте в коде требуемые настройки (см. комментарии в коде) и нажмите Готово.

6. Теперь достаточно перетащить необходимые колонки из панели Данные в поле виджета для визуализации данных. В нашем примере это salesamount и salesamount-plan:
   
   

    

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

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

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

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

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

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

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