|
Метка: новое перенаправление |
| (не показано 107 промежуточных версий этого же участника) |
| Строка 1: |
Строка 1: |
| − | При настройке [[Платформа 3V/Формы/Дашборд|дашборда]] можно создать диаграмму Ганта. диаграмму Ганта - способ графического отображения данных в виде иллюстрации плана или графика работ.
| + | #redirect [[Платформа 3V/Формы/Компоненты/Графики/Диаграмма Ганта]] |
| − | | |
| − | == Пример использования ==
| |
| − | Кейс: 1 серия без уникальности
| |
| − | | |
| − | [[Файл:76642.png|мини]]
| |
| − | | |
| − | [[Файл:Простая диаграмма Ганта.png|мини|слева]]
| |
| − | | |
| − | ====== Создать отчёт с данными, на которых будет строиться диаграмма Ганта ======
| |
| − | В отчёте обязательно должны быть столбцы с наименованием, датой начала и датой конца периода.
| |
| − | [[Файл:пивот стапель.png|мини]]
| |
| − | <br><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>
| |
| − | | |
| − | ====== Добавить элемент - диаграмма ======
| |
| − | Добавить в "элементы" диаграмму и задать у нее источник данных - ранее добавленный отчет
| |
| − | | |
| − | <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>
| |
| − | {
| |
| − | ...
| |
| − | | |
| − | "dataSourceId": 309
| |
| − |
| |
| − | ...
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | ====== Настроить вывод данных ======
| |
| − | Для того, чтобы данные отображались в виде столбцов, требуется добавить номера столбцов отчёта: "columnName" - наименование периода, "startDate" - дата начала периода, "endDate" - окончание периода, "color" - цвет периода.
| |
| − | <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>
| |
| − | | |
| − | ====== Настроить заголовок диаграммы ======
| |
| − | Для того, чтобы создать заголовок достаточно написать его в поле "Главный заголовок".
| |
| − | | |
| − | "title": {
| |
| − | "text": "Test",
| |
| − | "margin": 20,
| |
| − | "fontSize": 16,
| |
| − | "color": null
| |
| − | },
| |
| − | "subtitle": {
| |
| − | "fontSize": 12,
| |
| − | "text": null,
| |
| − | "margin": null,
| |
| − | "color": null
| |
| − | },
| |
| − | | |
| − | Для того, чтобы создать заголовок достаточно написать его в поле "Главный заголовок".
| |
| − | | |
| − | [[Файл:Настройка заголовка.png|мини|слева]]
| |
| − | <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><br><br><br><br><br><br><br><br>
| |
| − | Настройка расположения заголовка производится с помощью полей "Отступ сверху", "Выравнивание по горизонтали" и "Выравнивание по вертикали".
| |
| − | [[Файл:Расположение заголовка.png|мини|слева]]
| |
| − | <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": {
| |
| − | ...
| |
| − | | |
| − | "title": "Количество шагов",
| |
| − | "fontSizeTitle": "20",
| |
| − | "titleColor": "#9ed8ed",
| |
| − | "titleMargin": 5,
| |
| − | "titleAlign": "center",
| |
| − | "titleVerticalAlign": "bottom",
| |
| − | | |
| − | ...
| |
| − | },
| |
| − | | |
| − | ...
| |
| − | }
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | ====== Настроить сетку ======
| |
| − | Для того, чтобы отобразить сетку требуется поставить отметку в "Показать сетку".
| |
| − | [[Файл:отображение сетки.png|мини|слева]]
| |
| − | <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>
| |
| − | <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": {
| |
| − | | |
| − | ...
| |
| − | | |
| − | "axisGridLines": true,
| |
| − | "dashStyleAxisGridLines": "Dash",
| |
| − | "xGridLineColor": "#ffffff",
| |
| − | "xLineColor": "#ffffff",
| |
| − | "yGridLineColor": "#6a6a6a",
| |
| − | "yLineColor": "#ffffff",
| |
| − | | |
| − | ...
| |
| − | },
| |
| − | | |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | ====== Настроить легенду ======
| |
| − | | |
| − | Для того, чтобы отобразить сетку следует поставить отметку в "Отображать легенду". Легенду можно расположить сверху и снизу регулируется это полем "Положение". Границу легенды можно задать путем обозначение ее ширины в поле "Граница", её цвет можно настроbть в "Цвет границы". По умолчанию символ в легенде обозначающий цвет данных на диаграмме квадратный, изменить его форму можно в поле "Радиус скругления углов".
| |
| − | [[Файл:Легенда.png|мини|слева]]
| |
| − | <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>
| |
| − | {
| |
| − | ...
| |
| − | | |
| − | "templateOptions": {
| |
| − | ...
| |
| − | | |
| − | "showLegend": true,
| |
| − | "positions": "bottom",
| |
| − | "bgColorLegend": "#ffffff",
| |
| − | "bdWidthLegend": "1",
| |
| − | "bdColorLegend": "#d2f3ff",
| |
| − | "shadowLegend": false,
| |
| − | "symbolRadiusLegend": "6",
| |
| − | "colorLegend": "#3381be",
| |
| − | | |
| − | ...
| |
| − | }
| |
| − | ...
| |
| − | }
| |
| − |
| |
| − | </syntaxhighlight>
| |
| − | </div></div>
| |
| − | | |
| − | | |
| − | | |
| − | Кейс: 1 серия + уникальность
| |
| − | [[Файл:1 серия + уникальность.png|мини]]
| |
| − | | |
| − | Кейс: несколько серий без уникальности
| |
| − | [[Файл:несколько серий без уникальности.png|мини]]
| |
| − | | |
| − | Кейс: несколько серий без уникальности
| |
| − | [[Файл:несколько серий + уникальность.png|мини]]
| |