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

В 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(
                        `<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
});

Задайте в коде требуемые настройки (см. комментарии в коде) и нажмите Готово.
Теперь достаточно перетащить необходимые колонки из панели Данные в поле виджета для визуализации данных. В нашем примере это salesamount и salesamount-plan:
Для создания эффектной визуализации вы можете прибегнуть к визуальным настройкам виджета на вкладке Оформление. Подробную информацию о том, как настраивать виджеты см. в разделе Визуальные настройки виджетов.

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

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

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

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