Платформа 3V/Формы/Компоненты/Графики/Датчик Спидометр: различия между версиями

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 5: Строка 5:
 
   <div class="NavContent"> </br>
 
   <div class="NavContent"> </br>
  
−
{| class="wikitable"
+
{| class="wikitable" style="margin:auto; clear:both;"
 
|-
 
|-
 
! Наименование !! Свойство !! Тип !! Описание
 
! Наименование !! Свойство !! Тип !! Описание

Версия 13:01, 9 августа 2021

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

Описание свойств 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




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
















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

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

конструктор стрелка и точка.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


















Для того, чтобы настроить штрихи на графике нужно поставить отметку в поле "Включить тики(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













Например, для того, чтобы задать расположение графика в компоненте нужно . . . что-то про 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 можно узнать по ссылке.

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