|
Метка: новое перенаправление |
| (не показано 40 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| − | При настройке [[Платформа 3V/Формы/Дашборд|дашборда]] можно создать диаграмму Ганта. диаграмму Ганта - способ графического отображения данных в виде иллюстрации плана или графика работ.
| + | #redirect [[Платформа 3V/Формы/Компоненты/Графики/Диаграмма Ганта]] |
| − | | |
| − | == Описание свойств templateOptions ==
| |
| − | <div class="NavFrame collapsed">
| |
| − | <div class="NavHead">Свойства templateOptions</div>
| |
| − | <div class="NavContent">
| |
| − | {| class="wikitable" style="margin:auto; clear:both;"
| |
| − | |-
| |
| − | ! Наименование !! Свойство !! Тип !! Описание
| |
| − | |-
| |
| − | | Тип диаграммы || '''type''' || строковый || Выбор типа диаграммы
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"| '''Общие настройки'''
| |
| − | |-
| |
| − | | Ширина || '''width''' || числовой || Настройка ширины области диаграммы
| |
| − | |-
| |
| − | | Высота || '''height''' || числовой || Настройка высоты области диаграммы
| |
| − | |-
| |
| − | | Заливка || '''backgroundColor''' || строковый || Настройка цвета фона диаграммы
| |
| − | |-
| |
| − | | Ширина бордюра || '''borderWidth''' || строковый || Настройка толщины границы области диаграммы
| |
| − | |-
| |
| − | | Цвет бордюра || '''borderColor''' || строковый || Настройка цвета границы области диаграммы
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"| '''Формат шапки'''
| |
| − | |-
| |
| − | | Ключ|| '''formatHeader.key''' || строковый || Ключ
| |
| − | |-
| |
| − | | Формат || '''formatHeader.format''' || строковый || Настройка формата
| |
| − | |-
| |
| − | | Вывести текущую дату || '''currentDateIndicator''' || логический || Флаг, при включении которого выводится линия на текущей дату
| |
| − | |-
| |
| − | | Ширина линии текущей даты || '''currentDateIndicatorWidth''' || числовой || Настройка ширины линии текущей даты
| |
| − | |-
| |
| − | | Тип линии || '''currentDateIndicatorDashStyle''' || строковый || Настройка типа линии графика
| |
| − | |-
| |
| − | | Цвет линии || '''currentDateIndicatorColor''' || строковый || Настройка цвета линии текущей даты
| |
| − | |-
| |
| − | | Формат || '''currentDateIndicatorFormat''' || строковый || Настройка формата линии текущей даты
| |
| − | |-
| |
| − | | Анимация || '''animation''' || логический || Флаг, при включении которого диаграмма будет строиться с анимацией
| |
| − | |-
| |
| − | | Включить подпись || '''enableDataLabels''' || логический || Флаг, при включении которого будет выводится подпись
| |
| − | |-
| |
| − | | Выводимая колонка || '''enableDataLabelsFormat''' || строковый ||
| |
| − | |-
| |
| − | | Цвет выводимой колонки || '''enableDataLabelsColor''' || строковый || Настройка цвета выводимой колонки
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"| '''Настройка заголовка'''
| |
| − | |-
| |
| − | | Заголовок || '''title.text''' || строковый || Задание заголовка диаграммы
| |
| − | |-
| |
| − | | Отступ || '''title.margin''' || числовой || Отступ заголовка диаграммы сверху
| |
| − | |-
| |
| − | | Цвет заголовка || '''title.color''' || строковый || Настройка цвета заголовка
| |
| − | |-
| |
| − | | Размер шрифта || '''title.fontSize''' || строковый || Размер шрифта заголовка диаграммы
| |
| − | |-
| |
| − | | Выравнивание по вертикали || '''title.align''' || строковый || Выравнивание заголовка по вертикали
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"| '''Настройка подзаголовка'''
| |
| − | |-
| |
| − | | Заголовок || '''subtitle.text''' || строковый || Задание заголовка диаграммы
| |
| − | |-
| |
| − | | Отступ || '''subtitle.margin''' || числовой || Отступ заголовка диаграммы сверху
| |
| − | |-
| |
| − | | Цвет заголовка || '''subtitle.color''' || строковый || Настройка цвета заголовка
| |
| − | |-
| |
| − | | Размер шрифта || '''subtitle.fontSize''' || строковый || Размер шрифта заголовка диаграммы
| |
| − | |-
| |
| − | | Выравнивание по вертикали || '''subtitle.align''' || строковый || Выравнивание заголовка по вертикали
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"|'''Данные'''
| |
| − | |-
| |
| − | | Использовать несколько серий || '''moreSeries''' || логический || Флаг, при включении которого будет возможно использование нескольких серий данных
| |
| − | |-
| |
| − | | Колонка с данными || '''columnName''' || числовой || Задание номера колонки с данными
| |
| − | |-
| |
| − | | Колонка начала времени || '''startDate''' || числовой || Задание номера колонки с датой начала периода
| |
| − | |-
| |
| − | | Колонка завершения времени || '''endDate''' || числовой || Задание номера колонки с датой завершения периода
| |
| − | |-
| |
| − | | Колонка цвета || '''color''' || строковый || Задание цвета периода
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"|'''Выводимые колонки'''
| |
| − | |-
| |
| − | | Название || '''nameColumns.label''' || строковый || Задание названия колонки
| |
| − | |-
| |
| − | | Колонка || '''nameColumns.column''' || числовой || Задания номера столбца из отчёта
| |
| − | |-
| |
| − | | Процент || '''nameColumns.percent''' || логический|| Флаг, при включении которого
| |
| − | |-
| |
| − | | Колонка || '''nameColumns.colorPercentColumn''' || строковый || Задание номера столбца из отчёта
| |
| − | |-
| |
| − | ! colspan="4" style="text-align:center;"|'''Настройка выводимых колонок'''
| |
| − | |-
| |
| − | | Заголовок || '''gridColumns.title''' || строковый || Задание названия колонки
| |
| − | |-
| |
| − | | Формат || '''gridColumns.format''' || строковый ||
| |
| − | |-
| |
| − | | Редактирование конфигурации || '''chartOptions''' || строковый || Дополнительные настройки из [https://api.highcharts.com/gantt/# highcharts]
| |
| − | |}
| |
| − | </div>
| |
| − | </div>
| |
| − | | |
| − | == Примеры использования и настройки ==
| |
| − | | |
| − | === Создать отчёт с данными, на которых будет строиться диаграмма Ганта ===
| |
| − | В отчёте обязательно должны быть столбцы с наименованием, датой начала и датой конца периода.
| |
| − | [[Файл:отчёт гант.png|слева]]
| |
| − | <br><br><br><br><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": 55547,
| |
| − | "parameters": [],
| |
| − | "focusOnFirstCell": false,
| |
| − | "id": 55547,
| |
| − | "name": "План загрузки по договорам",
| |
| − | "isReadOnly": false,
| |
| − | "dataEditRuleIds": [],
| |
| − | "dataEditExpressionIds": [],
| |
| − | "beforeSaveDataActions": [],
| |
| − | "beforeSaveActions": [],
| |
| − | "afterSaveDataActions": [],
| |
| − | "afterSaveActions": [],
| |
| − | "discriminator": "PivotDataSource"
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | === Добавить элемент - диаграмма Ганта ===
| |
| − | Добавить в "элементы" диаграмму Ганта и задать у нее источник данных - ранее добавленный отчет
| |
| − | <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": 76623
| |
| − |
| |
| − | ...
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | === Настроить вывод данных ===
| |
| − | Для отображения данных требуется добавить обязательные источники данных - номера столбцов отчёта: "columnName" - наименование периода, "startDate" - дата начала периода, "endDate" - окончание периода, "color" - цвет периода(опционально).
| |
| − | [[Файл:данные.png|мини|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><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": {
| |
| − | ...
| |
| − | "columnName": 3,
| |
| − | "startDate": 6,
| |
| − | "endDate": 7,
| |
| − | "color": 5
| |
| − | }
| |
| − | ...
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | ====== Одна серия данных без уникальности ======
| |
| − | | |
| − | [[Файл:76642.png|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − | | |
| − | ====== Одна серия данных с уникальностью ======
| |
| − | [[Файл:1 серия + уникальность.png|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − | Отличие данного типа диаграммы Ганта в использовании уникальности данных. Уникальность проверяется по наименованию(columnName), каждое повторяющееся значение в columnName будет объединено в одну строку в диаграмме.
| |
| − | <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>
| |
| − | {
| |
| − | "moreSeries": false,
| |
| − | "uniqueNames": true
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | ====== Несколько серий без уникальности ======
| |
| − | [[Файл:несколько серий без уникальности.png|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − | Отличие данного типа диаграммы Ганта в использовании нескольких серий данных.
| |
| − | Для этого в отчёте следует настроить столбец с сериями. В нём обязательно должна быть сортировка по наименованию. Столбец включает в себя название серии, после которой идут пустые строки столбца, так определяется серия данных, блок данных с названием серии и пустыми строками под ней и будут являться серией данных.
| |
| − | [[Файл:отчёт для нескольких серий.png|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − | Обязательно нужно настроить в конструкторе отчёта пропуск дубликатов, иначе диаграмма отстроится на разных сериях данных с одинаковым названием(вставить скрин)
| |
| − | [[Файл:пропустить дубликаты.png|мини|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><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>
| |
| − | {
| |
| − | "moreSeries": true,
| |
| − | "uniqueNames": false
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | ====== Несколько серий с уникальностью ======
| |
| − | [[Файл:несколько серий + уникальность.png|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><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>
| |
| − | {
| |
| − | "moreSeries": true,
| |
| − | "uniqueNames": true
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | === Настройка боковой таблицы ===
| |
| − | | |
| − | Для отображения таблицы в nameColumns следует задать названия для выбранных колонок из отчёта, в дальнейшем в gridColumn нужно задать заголовки, которые были заданы в nameColumns в формате {point.label}, где label - объявленное название.
| |
| − | <gallery widths=330px heights=450px>
| |
| − | Файл:выводимые колонки.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>
| |
| − | "data": {
| |
| − | ...
| |
| − | "nameColumns": [
| |
| − | {
| |
| − | "label": "step",
| |
| − | "column": 2,
| |
| − | "percent": false,
| |
| − | "colorPercentColumn": null
| |
| − | },
| |
| − | {
| |
| − | "label": "date",
| |
| − | "column": 5,
| |
| − | "percent": false,
| |
| − | "colorPercentColumn": null
| |
| − | }
| |
| − | ]
| |
| − | },
| |
| − | "gridColumns": [
| |
| − | {
| |
| − | "format": "{point.step}",
| |
| − | "title": "Этап"
| |
| − | },
| |
| − | {
| |
| − | "format": "{point.date}",
| |
| − | "title": "Дата старта"
| |
| − | }
| |
| − | ]
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | === Настройка текущей даты ===
| |
| − | Для того, чтобы на графике показать текущую дату следует отметить флаг "Вывести текущую дату", после этого следует указать формат даты "currentDateIndicatorFormat"
| |
| − | | |
| − | {| class="wikitable"
| |
| − | |-
| |
| − | ! Формат !! Описание !! Пример
| |
| − | |-
| |
| − | | %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 - количество миллисекунд в нужном интервале.
| |
| − | [[Файл:формат шапки.png|мини|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><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>
| |
| − | {
| |
| − | "formatHeader": [
| |
| − | {
| |
| − | "key": "year",
| |
| − | "format": "%Y",
| |
| − | "tickInterval": null
| |
| − | },
| |
| − | {
| |
| − | "key": "month",
| |
| − | "format": "%b",
| |
| − | "tickInterval": 2592000000
| |
| − | },
| |
| − | {
| |
| − | "key": "month",
| |
| − | "format": "%m",
| |
| − | "tickInterval": 2592000000
| |
| − | }
| |
| − | ],
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | === Настройка процента выполнения ===
| |
| − | Для того, чтобы отобразить процент выполнения, нужно в nameColumn задать объект с лэйблом percent, colorPercentColumn - задание цвета процента выполнения из столбца отчёта.
| |
| − | [[Файл:отчёт для процентов.png|слева|700px|Пример отчёта]]
| |
| − | <br><br><br><br><br><br><br><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>
| |
| − | "nameColumns": [
| |
| − | {
| |
| − | "label": "percent",
| |
| − | "column": 5,
| |
| − | "percent": true,
| |
| − | "colorPercentColumn": 7
| |
| − | }
| |
| − | ]
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | <br>
| |
| − | [[Файл:гант проценты.png|слева|1200px|Пример вывода диаграммы с процентами]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
| |
| − | | |
| − | === Настроить заголовок диаграммы ===
| |
| − | Для того, чтобы создать заголовок достаточно написать его в поле "Заголовок". Настройка стиля заголовка производится с помощью полей "Размер шрифта" и "Цвет заголовка". Настройка расположения заголовка производится с помощью поля "Отступ".
| |
| − | [[Файл:Гант заголовок подзаголовок.png|мини|слева]]
| |
| − | <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><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>
| |
| − | "title": {
| |
| − | "text": "Test",
| |
| − | "margin": 20,
| |
| − | "fontSize": 16,
| |
| − | "color": null
| |
| − | },
| |
| − | "subtitle": {
| |
| − | "fontSize": 12,
| |
| − | "text": null,
| |
| − | "margin": null,
| |
| − | "color": null
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | === Дополнительные настройки chartOptions ===
| |
| − | Иногда требуются дополнительные настройки диаграммы для этого используется свойство chartOptions. Например, для того, чтобы задать отстройку размера диаграммы по количеству строк в отчёте следует задать статичную ширину колонки staticScale
| |
| − | <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>
| |
| − | {
| |
| − | "chartOptions": "{\n \"yAxis\":\n {\n \"staticScale\": 50\n }\n \n}\n\n\n "
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |