Изменения документа Диаграммы Схемы Графики

Редактировал(а) Coluns 31.03.2023
От версии 4.1
отредактировано hrapitan
на 11.03.2023
Изменить комментарий: К данной версии нет комментариев
К версии 14.1
отредактировано hrapitan
на 11.03.2023
Изменить комментарий: Загрузить новое изображение 2023-02-19_17-37-57.png

Сводка

Подробности

Свойства страницы
Содержимое
... ... @@ -2,7 +2,7 @@
2 2  {{toc start="2"/}}
3 3  {{/box}}
4 4  
5 -== Возможности платформы ==
5 +== **Возможности платформы** ==
6 6  
7 7  Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
8 8  
... ... @@ -14,8 +14,9 @@
14 14  
15 15  Рассмотрим все эти инструменты по порядку.
16 16  
17 +----
17 17  
18 -== Отрисовка диаграмм в визуальном редакторе draw.io ==
19 +== **Отрисовка диаграмм в визуальном редакторе draw.io** ==
19 19  
20 20  Расширение "**Diagram**"  позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее.
21 21  
... ... @@ -22,7 +22,7 @@
22 22  Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:
23 23  
24 24  
25 -[[image:2023-02-18_11-16-47.png||height="423" width="900"]]
26 +[[image:2023-02-18_11-16-47.png]]
26 26  
27 27  
28 28  В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)".
... ... @@ -35,3 +35,212 @@
35 35  )))
36 36  
37 37  В обоих случаях после сохранения страницы в выбранном нами месте статьи появляется кнопка "**Create diagram**", при нажатии которой автоматически создается дочерняя вики-страница с обозначением, заданным для ссылки в макросе (в нашем примере "(% style="color:#16a085" %)**//Diagram 1//**(%%)").
39 +
40 +
41 +[[image:2023-02-18_11-33-52_cr.png]]
42 +
43 +
44 +Эта страница содержит интерфейс редактора draw.io и позволяет создавать диаграммы и схемы с помощью визуальных инструментов.
45 +
46 +После создания и сохранения диаграммы она будет отображена на этой странице, а также на родительской странице со статьей, в которую мы вставили макрос.
47 +
48 +
49 +[[image:2023-02-18_11-48-22-2.png]]
50 +
51 +
52 +В дальнейшем при необходимости редактирования диаграммы это можно осуществить на дочерней странице, изменения будут автоматически отражены и в родительской статье.
53 +
54 +Вот таким образом мы можем использовать встроенный визуальный редактор диаграмм draw.io.
55 +
56 +----
57 +
58 +== **Работа с диаграммами на языке UML** ==
59 +
60 +Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя [[язык UML>>url:https://ru.wikipedia.org/wiki/UML]].
61 +
62 +Для этого предназначен специальный макрос "**PlantUML**", позволяющий отображать диаграммы и схемы, описанные языком UML. Работа с ним чрезвычайно проста: вы помещаете этот макрос в нужную позицию статьи и вносите в него описание диаграммы на языке UML.
63 +
64 +
65 +[[image:2023-02-18_17-41-18.png]]
66 +
67 +
68 +То же самое можно сделать, перейдя с помощью кнопки  [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
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 +=== Параметры графиков/диаграмм ===
2023-02-18_11-33-52_cr.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +114.3 KB
Содержимое
2023-02-18_11-48-22-2.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +207.3 KB
Содержимое
2023-02-18_17-41-18.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +208.9 KB
Содержимое
2023-02-19_15-58-06.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +108.5 KB
Содержимое
2023-02-19_16-50-57.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +104.8 KB
Содержимое
2023-02-19_17-37-57.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.hp
Размер
... ... @@ -1,0 +1,1 @@
1 +53.7 KB
Содержимое