Платформа 3V/Формы/Компоненты/Графики/Датчик Спидометр

При настройке дашборда можно создать Датчик "Спидометр". Датчик "Спидометр" - способ графического отображения данных, которая выглядит как спидометр в автомобилях, использующий иглу для отображения информации в виде показаний на циферблате.

Описание свойств templateOptions

Свойства templateOptions[show]

Наименование	Свойство	Тип	Описание
Тип диаграммы	type	строковый	Выбор типа диаграммы
Общие настройки
Заголовок	title	строковый	Задание заголовка диаграммы
Расположение заголовка	titleAlign	строковый	Выравнивание заголовка по горизонтали: центр, слева, справа
Цвет заголовка	titleColor	строковый	Настройка цвета заголовка
Отступ заголовка	titleMargin	числовой	Отступ заголовка диаграммы сверху
Размер заголовка	fontSizeTitle	числовой	Размер шрифта заголовка диаграммы
Ширина графика	chartWidth	числовой	Настройка ширины области диаграммы
Высота графика	chartHeight	числовой	Настройка высоты области диаграммы
Цвет заливки	bgColor	строковый	Настройка цвета фона диаграммы
Толщина границы	rowSolidData	числовой	Настройка толщины границы области диаграммы
Цвет границы	bdColor	строковый	Настройка цвета границы области диаграммы
Тип датчика	type	строковый	Выбор одного из типов датчика: Спидометр, Activity
Настройки датчика
Колонка минимума	colMin	числовой	Задание колонки отчёта с начальным значением для отстройки графика
Колонка максимума	colMax	числовой	Задание колонки отчёта с конечным значением для отстройки графика
Размер датчика (%)	solidSize	числовой	Задание процента, который будет занимать график в компоненте
Заливка датчика	fill	строковый	Настройка цвета заливки графика
Включить tooltip	tooltipEnabled	логический	Флаг, при включении которого на графике будут отображены всплывающие окна
Настройки лейблов
Включить лейблы	yLabelEnabled	логический	Флаг, при включении которого на графике будут отображены подписи
Цвет лейблов	yLabelColor	строковый	Настройка цвета подписей
Начертание лейблов	yLabelFontWeight	числовой
Размер шрифта	yLabelFontSize	числовой	Настройка размера шрифта лейбла
Отступ лейблов	yLabelTickDistance	числовой	Настройка отступа лейбла от графика
Включить тики	yTickEnabled	логический	Флаг, при включении которого на графике будут отображены тики
Цвет тиков	yLabelTickColor	строковый	Настройка цвета тиков
Отобразить минимальный и максимальный тики	yTickAddMinMax	логический	Флаг, при включении которого на графике будут отображены минимальный и максимальный тики
Длина тика	yLabelTickLength	числовой	Задание длины тика
Ширина тика	yLabelTickWidth	числовой	Задание ширины тика
Настройка данных
Колонка	seriesData.col	числовой	Номер колонки
Название	seriesData.name	строковый	Задание названия колонки
Тип	seriesData.type	строковый	Выбор типа данных: solidGauge(график), gauge(стрелка)
Колонка цвета	seriesData.colColor	строковый	Номер колонки с заданным цветом
Пользовательский цвет	seriesData.customColor	строковый	Настройка пользовательского цвета
Формат	seriesData.label.format	строковый
Размер подписи	seriesData.label.fontSize	числовой	Настройка размера подписи
Расположение подписи	seriesData.label.textAlign	строковый	Выбор расположения подписи: Слева, По центру, Справа
Цвет подписи	seriesData.label.color	строковый	Настройка цвета подписи
Отступ подписи	seriesData.label.margin	числовой	Настройка отступа подписи
Настройка стрелки
Радиус (%)	seriesData.arrow.radius	логический	Настройка длины стрелки в процентах
Цвет	seriesData.arrow.backgroundColor	логический	Настройка цвета стрелки
Ширина у основания	seriesData.arrow.baseWidth	логический	Настройка ширины стрелки у основания
Ширина у вершины	seriesData.arrow.topWidth	логический	Настройки ширины стрелки у её вершины
Отступ от точки(края)	seriesData.arrow.baseLength	логический	Настройка отступа от точки основания
Отступ от точки(основание)	seriesData.arrow.rearLength	логический	Настройка продолжения стрелки в сторону точки основания
Настройка точки
Радиус точки	seriesData.arrow.point.radius	логический	Настройка размера точки
Цвет точки	seriesData.arrow.point.color	логический	Настройка цвета точки
Редактирование конфигурации	chartOptions	строковый	Дополнительные настройки из highcharts

Пример JSON гистограммы

 1 {
 2       "key": "key1626685094654",
 3       "type": "trv-highcharts-speed",
 4       "dataSourceId": 1,
 5       "templateOptions": {
 6         "title": "Фиксированная ширина и высота",
 7         "fontSizeTitle": 25,
 8         "titleAlign": "center",
 9         "titleMargin": 40,
10         "titleColor": "#000",
11         "chartWidth": 800,
12         "chartHeight": 600,
13         "bgColor": "white",
14         "type": "solidgauge",
15         "rowSolidData": 1,
16         "fill": "#00f0c9",
17         "colMin": 1,
18         "colMax": 2,
19         "solidSize": 90,
20         "yLabelColor": "black",
21         "yLabelEnabled": true,
22         "yTickEnabled": true,
23         "yTickAddMinMax": true,
24         "yLabelFontWeight": 900,
25         "yLabelFontSize": 20,
26         "yLabelTickColor": "blue",
27         "yLabelTickLength": 10,
28         "yLabelTickWidth": 3,
29         "yLabelTickDistance": 20,
30         "seriesData": [
31           {
32             "col": 3,
33             "name": "test2",
34             "type": "solidgauge",
35             "colColor": 86,
36             "customColor": "",
37             "label": {
38               "textAlign": "center"
39             }
40           },
41           {
42             "col": 4,
43             "type": "gauge",
44             "name": "test",
45             "label": {
46               "format": "<div style='text-align:center'><span style='font-size:25px;color: 'black'>{series.name}</span><br/> <span style='font-size:12px;color:silver'>km/h</span></div>",
47               "fontSize": 20,
48               "textAlign": "left",
49               "color": "purple",
50               "margin": 30
51             },
52             "arrow": {
53               "radius": 100,
54               "backgroundColor": "red",
55               "baseWidth": 3,
56               "topWidth": 3,
57               "baseLength": 3,
58               "rearLength": 0,
59               "point": {
60                 "radius": 6,
61                 "color": "red"
62               }
63             }
64           }
65         ],
66         "chartOptions": "{\n    \"pane\": [{\n        \"startAngle\": -90,\n    \"endAngle\": 90,\n    \"center\": [\"50%\", \"85%\"]\n    },\n    {\n        \"startAngle\": -90,\n    \"endAngle\": 90,\n    \"center\": [\"50%\", \"85%\"]\n    }]\n}",
67         "tooltipEnabled": true,
68         "bdColor": "#942cc6"
69       }
70 }

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

Кейс: Вывести датчик спидометра, показывающую процент выполнения, где по плану процент выполнения должен быть 42, а фактический процент выполнения 54.

Создать отчёт с данными, на которых будет строиться датчик спидометра

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

Создать форму

В форму следует добавить источник данных и элемент.

Добавить источник данных - отчет

В форму добавить источник данных - отчет, где "pivotId" - это идентификатор отчета в навигаторе.

Пример JSON источника - отчета

 1 {
 2       "pivotId": 100,
 3       "parameters": null,
 4       "focusOnFirstCell": true,
 5       "id": 1,
 6       "name": "Отчет",
 7       "isReadOnly": true,
 8       "dataEditRuleIds": [],
 9       "beforeSaveDataActions": [],
10       "afterSaveDataActions": [],
11       "discriminator": "PivotDataSource"
12     }

Добавить элемент - датчик

Добавить элемент "Датчик" и задать у него источник данных - ранее добавленный отчет

Пример JSON

1 {      
2       ...   
3 
4       "dataSourceId": 309
5      
6       ...
7 }

Настроить тип датчика

В поле "Тип датчика(type)" выбрать значение "Спидометр(solidgauge)".

Настроить вывод данных

Для того, чтобы данные отображались в виде спидометра требуется указать номер строки с данными из отчёта в поле "Строка с данными(rowSolidData)", колонку со значением минимума и максимума в полях "Колонка минимума(colMin)" и "Колонка максимума(colMax)" соответственно. Настройку цвета для графика можно задать в поле "Заливка датчика(fill)".

Пример JSON общей настройки данных

 1 {
 2           ...
 3 
 4           "templateOptions": {
 5            ...
 6             "rowSolidData": 1,
 7             "colMin": 2,
 8             "colMax": 3,
 9             "fill": "lightpink"           
10           },
11           ...
12 }

Настроить заливку до значения

Для отображения процента выполнения по плану требуется в области "Настройка данных(seriesData)" добавить серию данных, где в поле "Колонка(col)" указать номер столбца из отчёта со значением планируемого процента выполнения, а в поле "Тип(type)" выбрать значение solidGauge. Задать цвет заливки планируемого процента выполнения можно в поле "Пользовательский цвет(customColor)" или указать номер столбца из отчёта с заданным цветом в поле "Колонка цвета(colColor)".

Настроить стрелку

Для настройки стрелки требуется в области "Настройка данных(seriesData)" добавить серию данных, где в поле "Колонка(col)" указать номер столбца из отчёта со значением, на которое должны указывать стрелка, а в поле "Тип(type)" выбрать значение gauge. Чтобы задать длину стрелки в поле "Радиус(radius)" нужно указать процент длины радиуса от внешней линии графика. Для того, чтобы настроить размер точки, из которой выходит стрелка графика следует указать её радиус в поле "Радиус точки(point.radius)".

Настроить заголовок датчика

Для того, чтобы создать заголовок достаточно написать его в поле "Заголовок(title)". Настройка расположения заголовка производится с помощью полей "Расположение заголовка(titleAlign)", "Отступ заголовка(titleMargin)". Настройка стиля заголовка производится с помощью полей "Цвет заголовка(titleColor)" и "Размер заголовка(fontSizeTitle)".

Пример JSON настройки заголовка

 1 {
 2           ...
 3 
 4           "templateOptions": {
 5             ...
 6 
 7             "title": "Процент выполнения",
 8             "titleAlign": "center",
 9             "titleMargin": 100,
10             "titleColor": "#ff8686",
11             "fontSizeTitle": 60
12           },
13         ...
14 }

Настроить лейблы

Для того, чтобы настроить подписи на графике нужно поставить отметку в поле "Включить лейблы(yLabelEnabled)". Для задания жирности шрифта нужно использовать поле "Начертание лейблов(yLabelFontWeight)", размер шрифта задаётся в поле "Размер шрифта(yLabelFontSize)", а отступ подписей от границы графика задаётся в поле "Отступ лейблов(yLabelTickDistance)".

Для того, чтобы настроить штрихи на графике нужно поставить отметку в поле "Включить тики(yTickEnabled)". Настройка стиля тиков задаётся с помощью полей "Цвет тиков(yLabelTickColor)", "Длина тика(yLabelTickLength)" и"Ширина тика(yLabelTickWidth)". Для того, чтобы задать тики на максимуме и на минимуме требуется установить флаг "yTickAddMinMax": true.

Пример JSON настройки лейблов и тиков

 1 {
 2           ...
 3 
 4           "templateOptions": {
 5 
 6             ...
 7             "yLabelEnabled": true,
 8             "yTickEnabled": true,
 9             "yLabelColor": "#e5596d",
10             "yLabelFontWeight": 5,
11             "yLabelFontSize": 20,
12             "yLabelTickDistance": 18,
13             "yLabelTickColor": "#c67579",
14             "yLabelTickLength": 10,
15             "yLabelTickWidth": 2,
16             "yTickAddMinMax": true
17 
18           },
19 }

Дополнительные настройки chartOptions

Иногда требуются дополнительные настройки диаграммы для этого используется поле "Редактирование конфигурации(chartOptions)".

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

Пример JSON расположения диаграммы

 1 {
 2     "pane": [{
 3         "startAngle": -90,
 4     "endAngle": 90,
 5     "center": ["50%", "70%"]
 6     },
 7     {
 8         "startAngle": -90,
 9     "endAngle": 90,
10     "center": ["50%", "70%"]
11     }]
12 }

Дополнительную информацию по chartOptions можно узнать по ссылке.