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

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
Строка 247: Строка 247:
 
В поле ''"Тип датчика(type)"'' выбрать значение ''"Спидометр(solidgauge)"''.
 
В поле ''"Тип датчика(type)"'' выбрать значение ''"Спидометр(solidgauge)"''.
 
[[Файл:тип датчика спидометр.png|слева]]
 
[[Файл:тип датчика спидометр.png|слева]]
−
<br><br><br><br></br>
+
</br></br></br></br></br>
  
 
====== Настроить вывод данных ======
 
====== Настроить вывод данных ======

Версия 12:42, 9 августа 2021

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

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


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

датчик спидометра.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=3552