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

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

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

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

Примеры использования и настройки

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

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

отчёт гант.png













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

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

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

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

Пример JSON источника - отчета
 1   {
 2       "pivotId": 55547,
 3       "parameters": [],
 4       "focusOnFirstCell": false,
 5       "id": 55547,
 6       "name": "План загрузки по договорам",
 7       "isReadOnly": false,
 8       "dataEditRuleIds": [],
 9       "dataEditExpressionIds": [],
10       "beforeSaveDataActions": [],
11       "beforeSaveActions": [],
12       "afterSaveDataActions": [],
13       "afterSaveActions": [],
14       "discriminator": "PivotDataSource"
15   }

Добавить элемент - диаграмма Ганта

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

Пример JSON
1 {      
2       ...   
3 
4       "dataSourceId": 76623
5      
6       ...
7 }

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

Для отображения данных требуется добавить обязательные источники данных - номера столбцов отчёта: "Колонка с данными(columnName)" - наименование, "Колонка начала времени(startDate)" - дата начала периода, "Колонка завершения времени(endDate)" - дата окончания периода, "Колонка цвета(color)" - цвет горизонтальной полосы(опционально).

данные.png
















Пример JSON источников данных диаграммы Ганта
 1   {
 2           ...
 3           "templateOptions": {
 4             ...
 5               "columnName": 3,
 6               "startDate": 6,
 7               "endDate": 7,
 8               "color": 5
 9             }
10             ...
11   }
Простая диаграмма Ганта
76642.png
























Пример JSON настройки серии и уникальности
1   { 
2     "moreSeries": false,
3     "uniqueNames": false
4    }
Диаграмма Ганта с уникальностью и несколькими сериями
несколько серий + уникальность.png

























Отличие данного типа диаграммы Ганта в использовании уникальности данных и нескольких серий данных. Уникальность проверяется по наименованию, каждое повторяющееся значение в наименовании будет объединено в одну строку в диаграмме. Для настройки нескольких серий о в отчёте следует настроить столбец с сериями. В нём обязательно должна быть сортировка по наименованию. Столбец включает в себя название серии, после которого идут пустые строки столбца. Блок данных с названием и пустыми строками под ним и будет являться серией данных.

2 серии данных отчёт.jpg














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

пропустить дубликаты.png















Пример JSON настройки нескольких серий и уникальности
1   { 
2     "moreSeries": true,
3     "uniqueNames": true
4    }
Простая диаграмма Ганта с уникальностью
1 серия + уникальность.png
















1   { 
2     "moreSeries": false,
3     "uniqueNames": true
4    }
Диаграмма Ганта с несколькими сериями
несколько серий без уникальности.png
























Пример JSON настройки серии и уникальности
1   { 
2     "moreSeries": true,
3     "uniqueNames": false
4    }

Настройка боковой таблицы

Для отображения таблицы в области "Выводимые колонки(nameColumns)" следует задать "Название(label)" для выбранной колонки из отчёта. В области "Настройка выводимых колонок(gridColumn)" нужно задать заголовки, в формате {point.label}, где label - объявленное название в области "Выводимые колонки(nameColumns)".

  • выводимые колонки.png
  • грид колонки.png
Пример JSON настройки вывода таблицы
 1 {
 2          "data": {
 3           ...
 4           "nameColumns": [
 5             {
 6               "label": "step",
 7               "column": 2,
 8               "percent": false,
 9               "colorPercentColumn": null
10             },
11             {
12               "label": "date",
13               "column": 5,
14               "percent": false,
15               "colorPercentColumn": null
16             }
17           ]
18         },        
19         "gridColumns": [
20           {
21             "format": "{point.step}",
22             "title": "Этап"
23           },
24           {
25             "format": "{point.date}",
26             "title": "Дата старта"
27           }
28         ]
29 }

Настройка текущей даты

Для того, чтобы на графике показать текущую дату требуется отметить флаг "Вывести текущую дату(currentDateIndicator)", после этого следует указать "Формат подписи текущей даты(currentDateIndicatorFormat)".

Формат Описание Пример
%a Укороченное название дня недели Mon
%A Полное название дня недели Monday
%d Двухзначная запись числа месяца с 01 до 31
%e Число месяца с 1 по 31
%b Укороченное название месяца Jan
%B Полное название месяца January
%m Двузначная запись месяца с 01 по 12
%y Двухзначный год 09 (как 2009)
%Y Четырёхзначный год 2009
%H Двухзначное запись часов 24-часовом формате с 00 по 23
%M Двухзначная запись минут с 00 по 59
%p Верхний регистр AM или PM
%P Нижний регистр AM или PM
%S Двухзначная запись секунд от 00 до 59

Настройка шапки

Для настройки отображения шапки-календаря диаграммы необходимо настроить "Формат шапки(formatHeader)". Для более точной работы следует явно указывать свойство "Интервал(tickInterval)" - количество миллисекунд в нужном интервале.

формат шапки1.png














Пример JSON настройки шапки
 1 {
 2          "formatHeader": [
 3               {
 4                 "key": "year",
 5                 "format": "%Y",
 6                 "tickInterval": null
 7               },
 8 {
 9                 "key": "month",
10                 "format": "%b",
11                 "tickInterval": 2592000000
12               },
13               {
14                 "key": "month",
15                 "format": "%m",
16                 "tickInterval": 2592000000
17               }
18             ],
19 }

Настройка процента выполнения

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

Пример отчёта
















Для того, чтобы отобразить процент выполнения, нужно в поставить флаг "Колонка с процентами(percent)". "Колонка для цвета процента(colorPercentColumn)" - задание цвета полосы процента выполнения из столбца отчёта.

процент гант.png















Пример JSON настройки заголовка
 1 {
 2   "nameColumns": [
 3                 {
 4                   "label": "percent",
 5                   "column": 5,
 6                   "percent": true,
 7                   "colorPercentColumn": 7
 8                 }
 9               ]
10 }


Пример вывода диаграммы с процентами

















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

Для того, чтобы создать заголовок достаточно написать его в поле "Заголовок(text)". Настройка стиля заголовка производится с помощью полей "Размер шрифта(fontSize)" и "Цвет заголовка(color)". Настройка расположения заголовка производится с помощью поля "Отступ(margin)".

Гант заголовок подзаголовок.png



























Пример JSON настройки заголовка
 1  "title": {
 2               "text": "Test",
 3               "margin": 20,
 4               "fontSize": 16,
 5               "color": null
 6             },
 7             "subtitle": {
 8               "fontSize": 12,
 9               "text": null,
10               "margin": null,
11               "color": null
12             }

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

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

конфигурация.png









Например, для того, чтобы задать отстройку размера диаграммы по количеству строк в отчёте следует задать статичную ширину колонки staticScale.

Пример JSON отстройки размера диаграммы по количеству строк 
1  {
2     "yAxis": 
3         {
4             "staticScale": 10
5         }
6 }

Для того, чтобы задать всплывающее при наведении окно следует задать "tooltip".

хинт гант.png









Пример JSON настройка всплывающих окон 
1 {
2   "tooltip": {
3     "pointFormat": '{point.name}<br/>Дата начала:{point.date1}<br/>Дата окончания:{point.date2}<br/>В статусе:{point.status}<br/>',       
4         "valueSuffix": '',
5         "shared": false
6     }
7 }

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

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