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

Материал из 3v-wiki
Перейти к навигации Перейти к поиску

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

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


Пример JSON датчика спидометра
 1 {
 2   "key": "key1628450397206",
 3   "type": "trv-highcharts-speed",
 4   "dataSourceId": 1,
 5   "templateOptions": {
 6     "titleAlign": "center",
 7     "titleMargin": 100,
 8     "chartWidth": 1000,
 9     "chartHeight": 700,
10     "type": "solidgauge",
11     "solidSize": 100,
12     "tooltipEnabled": true,
13     "yLabelEnabled": true,
14     "yTickEnabled": true,
15     "seriesData": [
16       {
17         "type": "solidgauge",
18         "label": {
19           "textAlign": "center",
20           "fontSize": null,
21           "color": "",
22           "margin": null,
23           "format": "{"
24         },
25         "col": 4,
26         "name": "План",
27         "customColor": "#d598a3",
28         "colColor": null
29       },
30       {
31         "type": "gauge",
32         "label": {
33           "textAlign": "center",
34           "format": "{series.name}",
35           "fontSize": 15,
36           "color": "#f27d7d",
37           "margin": 50
38         },
39         "col": 5,
40         "name": "% выполненных работ",
41         "customColor": "",
42         "arrow": {
43           "radius": 100,
44           "backgroundColor": "#ed5269",
45           "baseWidth": 5,
46           "topWidth": 1,
47           "baseLength": 50,
48           "rearLength": null,
49           "point": {
50             "radius": 4,
51             "color": "#991427"
52           }
53         },
54         "colColor": null
55       }
56     ],
57     "titleColor": "#ff8686",
58     "fontSizeTitle": 60,
59     "bgColor": "#fff5ee",
60     "bdWidth": 4,
61     "bdColor": "#feecd3",
62     "rowSolidData": 1,
63     "colMin": 2,
64     "colMax": 3,
65     "fill": "lightpink",
66     "yLabelColor": "#e5596d",
67     "yLabelFontWeight": 5252,
68     "yLabelFontSize": 20,
69     "yLabelTickDistance": 18,
70     "yLabelTickColor": "#c67579",
71     "yLabelTickLength": 10,
72     "yLabelTickWidth": 2,
73     "yTickAddMinMax": true,
74     "chartOptions": "{\n    \"pane\": [{\n        \"startAngle\": -90,\n    \"endAngle\": 90,\n    \"center\": [\"50%\", \"70%\"]\n    },\n    {\n        \"startAngle\": -90,\n    \"endAngle\": 90,\n    \"center\": [\"50%\", \"70%\"]\n    }],\n    \"tooltip\": {\n  \"pointFormat\": \"{series.name}\",\n       \n        \"valueSuffix\": \"\",\n        \"shared\": false\n    }\n}",
75     "templateDescription": null,
76     "title": "Процент выполнения"
77   }
78 }

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

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

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

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

отчёт спидометр.png





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

В форму следует добавить источник данных - отчет, где 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     }
Добавить элемент - датчик

Добавить элемент "Датчик" в правой панели управления.

выбор элемента датчик.png



В поле "Источник отображения данных" (pivotSourceId) задать него источник данных - ранее добавленный отчет.

источник данных датчик.png



Пример JSON
1 {      
2       ...   
3 
4       "dataSourceId": 309
5      
6       ...
7 }
Настроить тип датчика

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

тип датчика спидометр.png



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

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

настройка датчика.png



Пример 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).

  • план.png
  • спидометр без стрелки.png
Настроить стрелку

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

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

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

  • слева

  • спидометр без лэйблов.png



Пример 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).

  • включить лейблы спидометр.png
  • спидометр без тиков.png

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

  • слева

  • спидометр без заливки фона.png
Пример 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).

ред конфиг спидометр.png



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

Пример 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 можно узнать по ссылке.

Источник — https://wiki.3v-group.net/index.php?title=Платформа_3V/Формы/Компоненты/Графики/Датчик_Спидометр&oldid=4220