Изменения документа Диаграммы Схемы Графики
Редактировал(а) Coluns 31.03.2023
Сводка
-
Свойства страницы (1 изменено, 0 добавлено, 0 удалено)
-
Вложения (0 изменено, 0 добавлено, 2 удалено)
Подробности
- Свойства страницы
-
- Содержимое
-
... ... @@ -2,7 +2,7 @@ 2 2 {{toc start="2"/}} 3 3 {{/box}} 4 4 5 -== **Возможности платформы**==5 +== Возможности платформы == 6 6 7 7 Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов. 8 8 ... ... @@ -14,9 +14,8 @@ 14 14 15 15 Рассмотрим все эти инструменты по порядку. 16 16 17 ----- 18 18 19 -== **Отрисовка диаграмм в визуальном редакторе draw.io**==18 +== Отрисовка диаграмм в визуальном редакторе draw.io == 20 20 21 21 Расширение "**Diagram**" позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее. 22 22 ... ... @@ -53,9 +53,8 @@ 53 53 54 54 Вот таким образом мы можем использовать встроенный визуальный редактор диаграмм draw.io. 55 55 56 ----- 57 57 58 -== **Работа с диаграммами на языке UML**==56 +== Работа с диаграммами на языке UML == 59 59 60 60 Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя [[язык UML>>url:https://ru.wikipedia.org/wiki/UML]]. 61 61 ... ... @@ -65,183 +65,5 @@ 65 65 [[image:2023-02-18_17-41-18.png]] 66 66 67 67 68 -То же самое можно сделать, перейдя с помощью кнопки [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса: 69 69 70 -(% bis_skin_checked="1" class="box" %) 71 -((( 72 -~{~{plantuml}} 73 -//описание диаграммы на языке UML// 74 -~{~{/plantuml}} 75 -))) 76 - 77 -Адрес сервера обработки указывать не нужно, он задан в админке XWIKI. Но если вдруг после сохранения статьи визуализация не происходит — проверьте код UML и, если он в порядке, попробуйте указать адрес сервера обработки UML вручную. 78 - 79 -=== Примеры использования PlantUML === 80 - 81 -==== Блок-схема ==== 82 - 83 -{{example}} 84 -{{plantuml}} 85 - 86 -@startuml 87 - 88 -start 89 - 90 -:Check eax.me for new posts; 91 - 92 -while (There are new posts?) is (Yes); 93 - :Read one post; 94 - :Share; 95 - :Leave comments; 96 -endwhile (No); 97 - 98 -stop 99 - 100 -@enduml 101 - 102 -{{/plantuml}} 103 -{{/example}} 104 - 105 - 106 -==== Диаграммы последовательности ==== 107 - 108 -{{example}} 109 -{{plantuml}} 110 - 111 -@startuml 112 - 113 -actor User 114 -participant Nginx 115 -participant Application 116 -database PostgreSQL 117 - 118 -autonumber 1 119 -User -> Nginx: GET / HTTP/1.0 120 -Nginx -> Application: GET / HTTP/1.0 121 -Application -> PostgreSQL: SELECT * FROM ... 122 -PostgreSQL --> Application: (A LOT OF DATA) 123 -Application --> Nginx: HTTP/1.0 200 OK 124 -Nginx --> User: HTTP/1.0 200 OK 125 - 126 -@enduml 127 - 128 -{{/plantuml}} 129 -{{/example}} 130 - 131 - 132 -==== Временная диаграмма ==== 133 - 134 -{{example}} 135 -{{plantuml}} 136 - 137 -@startuml 138 -scale 5 as 150 pixels 139 - 140 -clock clk with period 1 141 -binary "enable" as en 142 -binary "R/W" as rw 143 -binary "data Valid" as dv 144 -concise "dataBus" as db 145 -concise "address bus" as addr 146 - 147 -@6 as :write_beg 148 -@10 as :write_end 149 - 150 -@15 as :read_beg 151 -@19 as :read_end 152 - 153 - 154 -@0 155 -en is low 156 -db is "0x0" 157 -addr is "0x03f" 158 -rw is low 159 -dv is 0 160 - 161 -@:write_beg-3 162 - en is high 163 -@:write_beg-2 164 - db is "0xDEADBEEF" 165 -@:write_beg-1 166 -dv is 1 167 -@:write_beg 168 -rw is high 169 - 170 - 171 -@:write_end 172 -rw is low 173 -dv is low 174 -@:write_end+1 175 -rw is low 176 -db is "0x0" 177 -addr is "0x23" 178 - 179 -@12 180 -dv is high 181 -@13 182 -db is "0xFFFF" 183 - 184 -@20 185 -en is low 186 -dv is low 187 -@21 188 -db is "0x0" 189 - 190 -highlight :write_beg to :write_end #Gold:Write 191 -highlight :read_beg to :read_end #lightBlue:Read 192 - 193 -db@:write_beg-1 <-> @:write_end : setup time 194 -db@:write_beg-1 -> addr@:write_end+1 : hold 195 -@enduml 196 - 197 - 198 -{{/plantuml}} 199 -{{/example}} 200 - 201 - 202 ----- 203 - 204 -== **Визуализация данных с помощью Chart Extension** == 205 - 206 -Расширение "**Chart**" позволяет строить всевозможные графики и диаграммы на основе табличных данных. Его компонент, с которым непосредственно работает пользователь — это макрос "**График**", доступный в меню выбора макросов. 207 - 208 - 209 -[[image:2023-02-19_15-58-06.png]] 210 - 211 - 212 -Тоже самое можно сделать, перейдя с помощью кнопки [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса: 213 - 214 -(% bis_skin_checked="1" class="box" %) 215 -((( 216 -~{~{chart}} //Настройки макроса и параметры графиков //~{~{/chart}} 217 -))) 218 - 219 -По умолчанию окно макроса имеет сокращенный набор полей, но с помощью кнопки "**Еще**" можно раскрыть полный набор настроек. 220 - 221 - 222 -[[image:2023-02-19_16-50-57.png]] 223 - 224 - 225 -Перечислим поля макроса. 226 - 227 -1. В поле "**Тип**" задается тип фигуры, которую требуется построить. Допустимые значения: 228 -1*. line (линии); 229 -1*. area (области); 230 -1*. bar (столбчатая диаграмма); 231 -1*. stackedbar (стековая диаграмма); 232 -1*. bar3D (столбчатая 3D-диаграмма); 233 -1*. stackedbar3D (стековая 3D-диаграмма); 234 -1*. pie (круговая диаграмма); 235 -1*. line3D (линии с эффектом 3D); 236 -1*. xy_area (область в координатах); 237 -1*. xy_line_and_shape (линии в координатах и с точками в узлах); 238 -1*. xy_line3D (линии в координатах и с эффектом 3D); 239 -1*. xy_step (состояния). 240 -1. В поле "**Содержимое**" вносятся данные для визуализации в режиме "(% style="color:#16a085" %)**inline**(%%)" (подробности ниже). 241 -1. В поле "**Высота**" при желании можно задать высоту графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix. 242 -1. В поле "**Параметры**" вносятся дополнительные настройки для построения графиков. Эта строка содержит список сопоставлений имени параметра со значением. Доступные имена и значения параметров зависят от используемого источника данных (подробности ниже). 243 -1. В поле "**Источник**" указывается один из двух типов источника данных — "(% style="color:#16a085" %)**inline**(%%)" и "(% style="color:#16a085" %)**xdom**(%%)" (подробности ниже). 244 -1. В поле "**Название**" можно задать заголовок для графика/диаграммы. 245 -1. В поле "**Ширина**" при желании можно задать ширину графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix. 246 - 247 -=== Параметры графиков/диаграмм === 67 +
- 2023-02-19_15-58-06.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.hp - Размер
-
... ... @@ -1,1 +1,0 @@ 1 -108.5 KB - Содержимое
- 2023-02-19_16-50-57.png
-
- Author
-
... ... @@ -1,1 +1,0 @@ 1 -XWiki.hp - Размер
-
... ... @@ -1,1 +1,0 @@ 1 -104.8 KB - Содержимое