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

Материал из 3v-wiki
Перейти к навигации Перейти к поиску
(Новая страница: «Описание датчика "Активити"»)
 
 
(не показаны 23 промежуточные версии 2 участников)
Строка 1: Строка 1:
−
Описание датчика "Активити"
+
При настройке [[Платформа 3V/Формы/Дашборд|дашборда]] можно создать Датчик активности. Датчик активности - способ графического отображения данных, которая представляет собой круговую гистограмму.
 +
== Описание свойств templateOptions ==
 +
<div class="NavFrame collapsed">
 +
  <div class="NavHead">Свойства templateOptions</div>
 +
  <div class="NavContent"> </br>
 +
 
 +
{| class="wikitable" style="margin:auto; clear:both;"
 +
|-
 +
! Наименование !! Свойство !! Тип !! Описание
 +
|-
 +
| Тип диаграммы || '''type''' || строковый || Обозначение датчика
 +
|-
 +
! colspan="4" style="text-align:center;"| '''Общие настройки'''
 +
|-
 +
| Заголовок || '''title''' || строковый || Задание заголовка диаграммы
 +
|-
 +
| Расположение заголовка || '''titleAlign''' || строковый || Выравнивание заголовка по горизонтали: По центру, Слева, Справа
 +
|-
 +
| Цвет заголовка || '''titleColor''' || строковый || Настройка цвета заголовка
 +
|-
 +
| Отступ заголовка || '''titleMargin''' || числовой || Отступ заголовка диаграммы сверху
 +
|-
 +
| Размер заголовка || '''fontSizeTitle''' || числовой || Размер шрифта заголовка диаграммы
 +
|-
 +
| Ширина графика || '''chartWidth''' || числовой || Настройка ширины области диаграммы
 +
|-
 +
| Высота графика || '''chartHeight''' || числовой || Настройка высоты области диаграммы
 +
|-
 +
| Цвет заливки || '''bgColor''' || строковый || Настройка цвета фона диаграммы
 +
|-
 +
| Толщина границы || '''rowSolidData''' || числовой || Настройка толщины границы области диаграммы
 +
|-
 +
| Цвет границы || '''bdColor''' || строковый || Настройка цвета границы области диаграммы
 +
|-
 +
| Тип датчика || '''type''' || строковый || Выбор одного из типов датчика: Спидометр, Activity
 +
|-
 +
! colspan="4" style="text-align:center;"| '''Настройки датчика'''
 +
|-
 +
| Строка с данными || '''rowSolidData''' || числовой || Задание строки, из которой будут браться данные
 +
|-
 +
| Колонка минимума || '''colMin''' || числовой || Задание колонки отчёта с начальным значением для отстройки графика
 +
|-
 +
| Колонка максимума || '''colMax''' || числовой || Задание колонки отчёта с конечным значением для отстройки графика
 +
|-
 +
! colspan="4" style="text-align:center;"| '''Настройка данных'''
 +
|-
 +
| Колонка || '''seriesData.col'''|| числовой || Номер колонки для серии данных
 +
|-
 +
| Название || '''seriesData.name'''|| строковый || Задание названия колонки
 +
|-
 +
| Внутренний радиус || '''seriesData.col'''|| числовой || Радиус внутренней линии серии данных
 +
|-
 +
| Наружный радиус || '''seriesData.col'''|| числовой || Радиус внешней линии серии данных
 +
|-
 +
| Пользовательский цвет серии || '''seriesData.colColor'''|| строковый || Номер колонки с заданным цветом
 +
|-
 +
| Цвет серии || '''seriesData.colColor'''|| строковый || Номер колонки с заданным цветом
 +
|-
 +
! colspan="4" style="text-align:center;"| '''Настройка подложки'''
 +
|-
 +
| Прозрачность подложки || '''seriesData.col'''|| числовой || Настройка прозрачности подложки
 +
|-
 +
| Внутренний радиус подложки || '''seriesData.col'''|| числовой || Настройка внутреннего радиуса подложки
 +
|-
 +
| Наружный радиус подложки|| '''seriesData.col'''|| числовой || Настройка наружного радиуса подложки
 +
|-
 +
| Цвет подложки || '''seriesData.type'''|| строковый || Настройка цвета подложки
 +
|-
 +
! colspan="4" style="text-align:center;"| '''Настройка всплывающих подсказок'''
 +
|-
 +
| Включить tooltip || '''tooltipEnabled'''|| логический || Флаг, при включении которого можно задать настройки для всплывающих окон
 +
|-
 +
| Формат tooltip || '''tooltipFormat'''|| строковый || Настройка формата всплывающей подсказки
 +
|-
 +
| Размер шрифта tooltip || '''fontSizeTitle'''|| числовой || Настройка размера шрифта всплывающей подсказки
 +
|-
 +
! colspan="4" style="text-align:center;"| '''Дополнительные настройки'''
 +
|-
 +
| Редактирование конфигурации || '''chartOptions''' || строковый || Дополнительные настройки из [https://api.highcharts.com/gantt/# highcharts]
 +
|}
 +
</div></div> </br>
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON датчика активности</div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
  "key": "key1628579599055",
 +
  "type": "trv-highcharts-speed",
 +
  "dataSourceId": 1,
 +
  "templateOptions": {
 +
    "enable": true,
 +
    "visible": true,
 +
    "titleAlign": "center",
 +
    "titleMargin": 100,
 +
    "chartWidth": 900,
 +
    "chartHeight": 900,
 +
    "type": "activity",
 +
    "solidSize": 100,
 +
    "tooltipEnabled": true,
 +
    "tooltipFormat": "<span style='color: {point.color}; font-size: large'>{series.name}</span><br><div style='text-align:center'><span style='color: {point.color}; font-weight: bold; font-size: large;'>{point.y}%</span></div>",
 +
    "yLabelEnabled": false,
 +
    "yTickEnabled": false,
 +
    "seriesData": [
 +
      {
 +
        "type": "gauge",
 +
        "label": {
 +
          "textAlign": "center"
 +
        },
 +
        "col": 3,
 +
        "seriesInnerRadius": 92,
 +
        "seriesRadius": 100,
 +
        "color": "#a07eff",
 +
        "paneOpacityColor": 0.5,
 +
        "paneInnerRadius": 92,
 +
        "paneRadius": 100,
 +
        "paneColor": "#cebdff",
 +
        "name": "Рестораны и кафе"
 +
      },
 +
      {
 +
        "type": "gauge",
 +
        "label": {
 +
          "textAlign": "center"
 +
        },
 +
        "col": 4,
 +
        "name": "Супермаркеты",
 +
        "seriesRadius": 90,
 +
        "seriesInnerRadius": 82,
 +
        "color": "#ff7eaf",
 +
        "paneOpacityColor": 0.5,
 +
        "paneInnerRadius": 82,
 +
        "paneRadius": 90,
 +
        "paneColor": "#ffc2d9"
 +
      },
 +
      {
 +
        "type": "gauge",
 +
        "label": {
 +
          "textAlign": "center"
 +
        },
 +
        "col": 5,
 +
        "name": "Транспорт",
 +
        "seriesInnerRadius": 72,
 +
        "seriesRadius": 80,
 +
        "color": "#7ecbff",
 +
        "paneOpacityColor": 0.9,
 +
        "paneInnerRadius": 72,
 +
        "paneRadius": 80,
 +
        "paneColor": "#d6efff"
 +
      },
 +
      {
 +
        "type": "gauge",
 +
        "label": {
 +
          "textAlign": "center"
 +
        },
 +
        "col": 6,
 +
        "name": "Образование",
 +
        "seriesInnerRadius": 62,
 +
        "seriesRadius": 70,
 +
        "color": "#ff8c7e",
 +
        "paneOpacityColor": 0.5,
 +
        "paneInnerRadius": 62,
 +
        "paneRadius": 70,
 +
        "paneColor": "#ffc4bd"
 +
      },
 +
      {
 +
        "type": "gauge",
 +
        "label": {
 +
          "textAlign": "center"
 +
        },
 +
        "col": 7,
 +
        "name": "Коммунальные платежи",
 +
        "seriesRadius": 60,
 +
        "seriesInnerRadius": 52,
 +
        "color": "#ffba7e",
 +
        "paneOpacityColor": 0.5,
 +
        "paneColor": "#ffe6d1",
 +
        "paneRadius": 60,
 +
        "paneInnerRadius": 52
 +
      }
 +
    ],
 +
    "title": "Расходы",
 +
    "rowSolidData": 1,
 +
    "colMin": 1,
 +
    "colMax": 2,
 +
    "titleColor": "#ad75ad",
 +
    "fontSizeTitle": 30,
 +
    "bgColor": "#fcfaff",
 +
    "bdWidth": 3,
 +
    "bdColor": "#fcd7d6",
 +
    "chartOptions": "" 
 +
  }
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
== Пример использования(процент запланированных расходов по категориям) ==
 +
Кейс: Вывести датчик, показывающий процент расходов по категориям. Пример на платформе можно посмотреть [https://study.3v-cloud.com/navigator/#/home?objectId=53 здесь].
 +
[[Файл:расходы.gif||600px|центр]]
 +
 
 +
====== Создать отчёт с данными, на которых будет строиться датчик ======
 +
Все значения необходимые для отстройки отчёта должны быть в одной строке, где обязательно заданы минимум и максимум датчика.
 +
[[Файл:отчёт активности.png|слева]]
 +
<br><br><br><br><br><br><br><br>
 +
 
 +
====== Создать форму ======
 +
В форму следует добавить источник данных - отчет, где '''''pivotId''''' - это идентификатор отчета в навигаторе.
 +
 
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON источника - отчета</div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
      "pivotId": 100,
 +
      "parameters": null,
 +
      "focusOnFirstCell": true,
 +
      "id": 1,
 +
      "name": "Отчет",
 +
      "isReadOnly": true,
 +
      "dataEditRuleIds": [],
 +
      "beforeSaveDataActions": [],
 +
      "afterSaveDataActions": [],
 +
      "discriminator": "PivotDataSource"
 +
    }
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
====== Добавить элемент - датчик ======
 +
Добавить элемент ''"Датчик"'' в правой панели управления.
 +
[[Файл:выбор элемента датчик.png|слева]]<br clear="both" /><br>
 +
 
 +
В поле ''"Источник отображения данных" ('''pivotSourceId''')'' задать него источник данных - ранее добавленный отчет.
 +
[[Файл:источник данных датчик.png|слева]]<br clear="both" /><br>
 +
 
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON</div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{     
 +
      ... 
 +
 
 +
      "dataSourceId": 309
 +
   
 +
      ...
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
====== Настроить тип датчика ======
 +
В поле ''"Тип датчика" ('''type''')"' выбрать значение ''"Activity" ('''activity''')''.
 +
 
 +
[[Файл:тип активити.png|слева]]<br clear="both" /><br>
 +
 
 +
====== Настроить вывод данных ======
 +
Для того, чтобы данные отображались в виде круговой гистограммы требуется указать номер строки с данными из отчёта в поле ''"Строка с данными" ('''rowSolidData''')'' и номера колонок со значением минимума и максимума в полях ''"Колонка минимума" ('''colMin''')'' и ''"Колонка максимума" ('''colMax''')'' соответственно.
 +
[[Файл:настройка датчика активити.png|слева]]<br clear="both" /><br>
 +
 
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON общей настройки данных</div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
          ...
 +
 
 +
          "templateOptions": {
 +
          ...
 +
            "rowSolidData": 1,
 +
            "colMin": 2,
 +
            "colMax": 3         
 +
          },
 +
          ...
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
====== Настроить отображение данных ======
 +
Для отображения процента требуется в области ''"Настройка данных" ('''seriesData''')'' добавить серию данных, где в поле ''"Колонка" ('''col''')'' указать номер столбца из отчёта с процентом заполнения серии. Задать ширину и область отображения серии можно с помощью задания внутреннего и внешнего радиуса, это можно сделать в полях ''"Внутренний радиус" ('''paneInnerRadius''')'' и ''"Наружный радиус" ('''paneRadius''')''. Цвет заливки процента задаётся в поле ''"Цвет серии" ('''color''')'' или с в отчёте в отдельной колонке и её номер выводится в поле ''"Пользовательский цвет серии" ('''hColor''')''. Название задаётся в соответствующем поле ''"Название" ('''name''')''.
 +
 
 +
Для того, чтобы настроить круговую область нужно задать её прозрачность в поле ''"Прозрачность подложки" ('''paneOpacityColor''')''. Для настройки её ширины нужно задать внутренний и внешний радиус в полях ''"Внутренний радиус подложки" ('''paneInnerRadius''')'' и ''"Наружный радиус подложки" ('''paneRadius''')'' соответственно. Цвет подложки задаётся в поле ''"Цвет подложки" ('''paneColor''')''.<br>'''ВАЖНО!!'''  Без настройки подложки, датчик отображаться не будет.
 +
<gallery mode="packed-hover" heights=635px style="text-align:left">
 +
Файл:настройка данных активити.png
 +
Файл:объяснение что такое подложка.png
 +
</gallery><br>
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON настройки данных </div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
          ...
 +
 
 +
          "templateOptions": {
 +
            ...
 +
 
 +
            "seriesData": [
 +
              {
 +
                "type": "gauge",
 +
                "label": {
 +
                  "textAlign": "center"
 +
                },
 +
                "col": 3,
 +
                "seriesInnerRadius": 92,
 +
                "seriesRadius": 100,
 +
                "color": "#a07eff",
 +
                "paneOpacityColor": 0.5,
 +
                "paneInnerRadius": 92,
 +
                "paneRadius": 100,
 +
                "paneColor": "#d9ccff",
 +
                "name": " "
 +
      },
 +
          },
 +
        ...
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
====== Настроить заголовок датчика ======
 +
Для того, чтобы создать заголовок достаточно написать его в поле ''"Заголовок" ('''title''')''. Настройка расположения заголовка производится с помощью полей ''"Расположение заголовка" ('''titleAlign''')'',  ''"Отступ заголовка" ('''titleMargin''')''. Настройка стиля заголовка производится с помощью полей ''"Цвет заголовка" ('''titleColor''')'' и ''"Размер заголовка" ('''fontSizeTitle''')''.
 +
<gallery mode="packed-hover" heights=400px style="text-align:left">
 +
Файл:заголовок спид.png
 +
Файл:заголовок актиити.png
 +
</gallery>
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON настройки заголовка </div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
          ...
 +
 
 +
          "templateOptions": {
 +
            ...
 +
 
 +
            "title": "Процент выполнения",
 +
            "titleAlign": "center",
 +
            "titleMargin": 100,
 +
            "titleColor": "#ff8686",
 +
            "fontSizeTitle": 60
 +
          },
 +
        ...
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
====== Настроить всплывающие подсказки ======
 +
Для того, чтобы при наведении указателем мышки на серию данных отображалась надпись следует задать поставить отметку в поле ''"Включить tooltip" ('''tooltipEnabled''')'', задать формат в поле ''"Формат tooltip" ('''tooltipFormat''')'' и задать размер шрифта в поле ''"Размер шрифта tooltip" ('''tooltipSize''')''.
 +
[[Файл:тултип активити.gif|слева]]<br clear="both" /><br>
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON настройки заголовка </div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
          ...
 +
 
 +
          "templateOptions": {
 +
            ...
 +
 
 +
            "tooltipEnabled": true,
 +
            "tooltipFormat": "<span style='color: {point.color}; font-size: large'>{series.name}</span><br><div style='text-align:center'><span style='color: {point.color}; font-weight: bold; font-size: large;'>{point.y}%</span></div>",
 +
            "tooltipSize": 20
 +
          },
 +
        ...
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
====== Дополнительные настройки chartOptions  ======
 +
Иногда требуются дополнительные настройки диаграммы для этого используется поле ''"Редактирование конфигурации" ('''chartOptions''')''.
 +
[[Файл:ред конфиг спидометр.png|слева]]<br clear="both" /><br>
 +
 
 +
Например, для того, чтобы задать расположение графика в компоненте нужно изменить значения массива '''''center'''''.
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON расположения диаграммы </div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
    "pane": [{
 +
        "startAngle": -90,
 +
    "endAngle": 90,
 +
    "center": ["50%", "70%"]
 +
    },
 +
    {
 +
        "startAngle": -90,
 +
    "endAngle": 90,
 +
    "center": ["50%", "70%"]
 +
    }]
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
Дополнительную информацию по chartOptions можно узнать [https://api.highcharts.com по ссылке].
 +
 
 +
== Пример использования(процент выполнения плана) ==
 +
Кейс: Отобразить датчик, показывающий процент выполнения плана. Пример на платформе можно посмотреть [https://study.3v-cloud.com/navigator/#/home?objectId=59 здесь].
 +
[[Файл:активити3.png|центр]]
 +
Настройка данной диаграммы происходит аналогично датчику на примере выше, за исключением настройки подложки.
 +
====== Настройка подложки ======
 +
Чтобы настроить подложку, которая полностью покрывает радиус диаграммы требуется в поле ''"Внутренний радиус подложки('''paneInnerRadius''')"'' задать значение 0.
 +
 
 +
[[Файл:подложка круг1.png|слева]]<br clear="both" /><br>
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON изменени </div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{
 +
          ...
 +
 
 +
          "templateOptions": {
 +
            ...
 +
 
 +
            "seriesData": [
 +
              {
 +
                ...               
 +
                "paneInnerRadius": 92,
 +
                "paneRadius": 100
 +
                ...
 +
      },
 +
          },
 +
        ...
 +
}
 +
</syntaxhighlight>
 +
</div></div>
 +
 
 +
=== Дополнительные настройки chartOptions  ===
 +
Для того, чтобы задать отображение названия в центре датчика  следует задать свойства: '''''verticalAlign''''', '''''style''''', '''''format'''''.
 +
[[Файл:активити3.png|слева]]<br clear="both" /><br>
 +
<div class="toccolours mw-collapsible mw-collapsed" style="width:800px; overflow:auto;">
 +
<div style="font-weight:bold;line-height:1.6;"> Пример JSON задания заголовка внутри датчика </div>
 +
<div class="mw-collapsible-content mw-collapsed-content">
 +
<syntaxhighlight lang="JSON" line>
 +
{  "plotOptions": {
 +
        "solidgauge": {
 +
            "dataLabels": {
 +
        "enabled": true,
 +
        "allowOverlap": true,
 +
      "borderWidth": 0,
 +
        "verticalAlign": "middle",
 +
              "style": {
 +
                    "fontSize": "30px",
 +
                    "color": "violet",
 +
                    "textOutline": "0px contrast"
 +
                },
 +
                "format": "Процент выполнения <br> плана "
 +
     
 +
      },
 +
          "linecap": "round",
 +
            "stickyTracking": false,
 +
            "rounde": true
 +
        }
 +
    }
 +
    }
 +
</syntaxhighlight>
 +
</div></div>
 +
Дополнительную информацию по chartOptions можно узнать [https://api.highcharts.com по ссылке].

Текущая версия на 08:23, 16 сентября 2021

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

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


Пример JSON датчика активности
  1 {
  2   "key": "key1628579599055",
  3   "type": "trv-highcharts-speed",
  4   "dataSourceId": 1,
  5   "templateOptions": {
  6     "enable": true,
  7     "visible": true,
  8     "titleAlign": "center",
  9     "titleMargin": 100,
 10     "chartWidth": 900,
 11     "chartHeight": 900,
 12     "type": "activity",
 13     "solidSize": 100,
 14     "tooltipEnabled": true,
 15     "tooltipFormat": "<span style='color: {point.color}; font-size: large'>{series.name}</span><br><div style='text-align:center'><span style='color: {point.color}; font-weight: bold; font-size: large;'>{point.y}%</span></div>",
 16     "yLabelEnabled": false,
 17     "yTickEnabled": false,
 18     "seriesData": [
 19       {
 20         "type": "gauge",
 21         "label": {
 22           "textAlign": "center"
 23         },
 24         "col": 3,
 25         "seriesInnerRadius": 92,
 26         "seriesRadius": 100,
 27         "color": "#a07eff",
 28         "paneOpacityColor": 0.5,
 29         "paneInnerRadius": 92,
 30         "paneRadius": 100,
 31         "paneColor": "#cebdff",
 32         "name": "Рестораны и кафе"
 33       },
 34       {
 35         "type": "gauge",
 36         "label": {
 37           "textAlign": "center"
 38         },
 39         "col": 4,
 40         "name": "Супермаркеты",
 41         "seriesRadius": 90,
 42         "seriesInnerRadius": 82,
 43         "color": "#ff7eaf",
 44         "paneOpacityColor": 0.5,
 45         "paneInnerRadius": 82,
 46         "paneRadius": 90,
 47         "paneColor": "#ffc2d9"
 48       },
 49       {
 50         "type": "gauge",
 51         "label": {
 52           "textAlign": "center"
 53         },
 54         "col": 5,
 55         "name": "Транспорт",
 56         "seriesInnerRadius": 72,
 57         "seriesRadius": 80,
 58         "color": "#7ecbff",
 59         "paneOpacityColor": 0.9,
 60         "paneInnerRadius": 72,
 61         "paneRadius": 80,
 62         "paneColor": "#d6efff"
 63       },
 64       {
 65         "type": "gauge",
 66         "label": {
 67           "textAlign": "center"
 68         },
 69         "col": 6,
 70         "name": "Образование",
 71         "seriesInnerRadius": 62,
 72         "seriesRadius": 70,
 73         "color": "#ff8c7e",
 74         "paneOpacityColor": 0.5,
 75         "paneInnerRadius": 62,
 76         "paneRadius": 70,
 77         "paneColor": "#ffc4bd"
 78       },
 79       {
 80         "type": "gauge",
 81         "label": {
 82           "textAlign": "center"
 83         },
 84         "col": 7,
 85         "name": "Коммунальные платежи",
 86         "seriesRadius": 60,
 87         "seriesInnerRadius": 52,
 88         "color": "#ffba7e",
 89         "paneOpacityColor": 0.5,
 90         "paneColor": "#ffe6d1",
 91         "paneRadius": 60,
 92         "paneInnerRadius": 52
 93       }
 94     ],
 95     "title": "Расходы",
 96     "rowSolidData": 1,
 97     "colMin": 1,
 98     "colMax": 2,
 99     "titleColor": "#ad75ad",
100     "fontSizeTitle": 30,
101     "bgColor": "#fcfaff",
102     "bdWidth": 3,
103     "bdColor": "#fcd7d6",
104     "chartOptions": ""  
105   }
106 }

Пример использования(процент запланированных расходов по категориям)

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

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

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

отчёт активности.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)"' выбрать значение "Activity" (activity).

тип активити.png



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

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

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



Пример JSON общей настройки данных
 1 {
 2           ...
 3 
 4           "templateOptions": {
 5            ...
 6             "rowSolidData": 1,
 7             "colMin": 2,
 8             "colMax": 3          
 9           },
10           ...
11 }
Настроить отображение данных

Для отображения процента требуется в области "Настройка данных" (seriesData) добавить серию данных, где в поле "Колонка" (col) указать номер столбца из отчёта с процентом заполнения серии. Задать ширину и область отображения серии можно с помощью задания внутреннего и внешнего радиуса, это можно сделать в полях "Внутренний радиус" (paneInnerRadius) и "Наружный радиус" (paneRadius). Цвет заливки процента задаётся в поле "Цвет серии" (color) или с в отчёте в отдельной колонке и её номер выводится в поле "Пользовательский цвет серии" (hColor). Название задаётся в соответствующем поле "Название" (name).

Для того, чтобы настроить круговую область нужно задать её прозрачность в поле "Прозрачность подложки" (paneOpacityColor). Для настройки её ширины нужно задать внутренний и внешний радиус в полях "Внутренний радиус подложки" (paneInnerRadius) и "Наружный радиус подложки" (paneRadius) соответственно. Цвет подложки задаётся в поле "Цвет подложки" (paneColor).
ВАЖНО!! Без настройки подложки, датчик отображаться не будет.

  • настройка данных активити.png
  • объяснение что такое подложка.png


Пример JSON настройки данных 
 1 {
 2           ...
 3 
 4           "templateOptions": {
 5             ...
 6 
 7             "seriesData": [
 8               {
 9                 "type": "gauge",
10                 "label": {
11                   "textAlign": "center"
12                 },
13                 "col": 3,
14                 "seriesInnerRadius": 92,
15                 "seriesRadius": 100,
16                 "color": "#a07eff",
17                 "paneOpacityColor": 0.5,
18                 "paneInnerRadius": 92,
19                 "paneRadius": 100,
20                 "paneColor": "#d9ccff",
21                 "name": " "
22       },
23           },
24         ...
25 }
Настроить заголовок датчика

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

  • заголовок спид.png
  • заголовок актиити.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 }
Настроить всплывающие подсказки

Для того, чтобы при наведении указателем мышки на серию данных отображалась надпись следует задать поставить отметку в поле "Включить tooltip" (tooltipEnabled), задать формат в поле "Формат tooltip" (tooltipFormat) и задать размер шрифта в поле "Размер шрифта tooltip" (tooltipSize).

тултип активити.gif



Пример JSON настройки заголовка 
 1 {
 2           ...
 3 
 4           "templateOptions": {
 5             ...
 6 
 7              "tooltipEnabled": true,
 8              "tooltipFormat": "<span style='color: {point.color}; font-size: large'>{series.name}</span><br><div style='text-align:center'><span style='color: {point.color}; font-weight: bold; font-size: large;'>{point.y}%</span></div>",
 9             "tooltipSize": 20
10           },
11         ...
12 }
Дополнительные настройки 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 можно узнать по ссылке.

Пример использования(процент выполнения плана)

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

активити3.png

Настройка данной диаграммы происходит аналогично датчику на примере выше, за исключением настройки подложки.

Настройка подложки

Чтобы настроить подложку, которая полностью покрывает радиус диаграммы требуется в поле "Внутренний радиус подложки(paneInnerRadius)" задать значение 0.

подложка круг1.png



Пример JSON изменени 
 1 {
 2           ...
 3 
 4           "templateOptions": {
 5             ...
 6 
 7             "seriesData": [
 8               {
 9                 ...                
10                 "paneInnerRadius": 92,
11                 "paneRadius": 100
12                 ...
13       },
14           },
15         ...
16 }

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

Для того, чтобы задать отображение названия в центре датчика следует задать свойства: verticalAlign, style, format.

активити3.png



Пример JSON задания заголовка внутри датчика 
 1 {  "plotOptions": {
 2         "solidgauge": {
 3              "dataLabels": {
 4         "enabled": true,
 5         "allowOverlap": true,
 6        "borderWidth": 0,
 7         "verticalAlign": "middle",
 8               "style": {
 9                     "fontSize": "30px",
10                     "color": "violet",
11                     "textOutline": "0px contrast"
12                 },
13                  "format": "Процент выполнения <br> плана "
14        
15       },
16            "linecap": "round",
17             "stickyTracking": false,
18             "rounde": true
19         }
20     }
21     }

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

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