Исходный код вики Диаграммы Схемы Графики

Версия 32.1 от hrapitan на 11.03.2023
Скрыть последних авторов
hrapitan 1.2 1 {{box cssClass="floatinginfobox" title="**Содержание:**"}}
2 {{toc start="2"/}}
3 {{/box}}
4
hrapitan 7.1 5 == **Возможности платформы** ==
hrapitan 1.2 6
7 Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
8
9 На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
10
11 * **Diagram (draw.io)** — приложение, позволяющее рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный графический редактор;
12 * **PlantUML** — макрос, позволяющий отображать диаграммы и схемы, описанные языком UML;
13 * **График (Chart) **— расширение, позволяющее строить всевозможные графики и диаграммы на основе табличных данных.
14
15 Рассмотрим все эти инструменты по порядку.
16
hrapitan 7.1 17 ----
hrapitan 1.2 18
hrapitan 7.1 19 == **Отрисовка диаграмм в визуальном редакторе draw.io** ==
hrapitan 1.2 20
21 Расширение "**Diagram**"  позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее.
22
23 Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:
hrapitan 3.1 24
25
hrapitan 5.1 26 [[image:2023-02-18_11-16-47.png]]
hrapitan 3.1 27
28
29 В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)".
30
31 То же самое можно сделать, перейдя с помощью кнопки [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
32
33 (% bis_skin_checked="1" class="box" %)
34 (((
35 ~{~{diagram reference="Diagram 1"/}}
36 )))
37
38 В обоих случаях после сохранения страницы в выбранном нами месте статьи появляется кнопка "**Create diagram**", при нажатии которой автоматически создается дочерняя вики-страница с обозначением, заданным для ссылки в макросе (в нашем примере "(% style="color:#16a085" %)**//Diagram 1//**(%%)").
hrapitan 5.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
hrapitan 7.1 56 ----
hrapitan 5.1 57
hrapitan 7.1 58 == **Работа с диаграммами на языке UML** ==
hrapitan 5.1 59
hrapitan 6.1 60 Кроме рисования в визуальном редакторе draw.io, платформа XWiki позволяет создавать диаграммы, используя [[язык UML>>url:https://ru.wikipedia.org/wiki/UML]].
hrapitan 5.1 61
62 Для этого предназначен специальный макрос "**PlantUML**", позволяющий отображать диаграммы и схемы, описанные языком UML. Работа с ним чрезвычайно проста: вы помещаете этот макрос в нужную позицию статьи и вносите в него описание диаграммы на языке UML.
63
64
hrapitan 6.1 65 [[image:2023-02-18_17-41-18.png]]
66
67
hrapitan 7.1 68 То же самое можно сделать, перейдя с помощью кнопки  [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
hrapitan 6.1 69
hrapitan 7.1 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
hrapitan 12.1 106 ==== Диаграммы последовательности ====
hrapitan 7.1 107
108 {{example}}
109 {{plantuml}}
hrapitan 11.1 110
hrapitan 10.1 111 @startuml
hrapitan 7.1 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** ==
hrapitan 12.1 205
hrapitan 13.1 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. В поле "**Тип**" задается тип фигуры, которую требуется построить. Допустимые значения: 
hrapitan 15.1 228 1*. line ([[линии>>attach:2023-02-19_17-37-57.png]]);
hrapitan 18.1 229 1*. area ([[области>>attach:2023-02-19_17-35-35.png]]);
hrapitan 26.1 230 1*. bar ([[столбчатая диаграмма>>attach:2023-02-19_17-40-50.png]]);
231 1*. stackedbar ([[стековая диаграмма>>attach:2023-02-19_17-49-50.png]]);
232 1*. bar3D ([[столбчатая 3D-диаграмма>>attach:2023-02-19_17-52-19.png]]);
233 1*. stackedbar3D ([[стековая 3D-диаграмма>>attach:2023-02-19_17-52-57.png]]);
234 1*. pie ([[круговая диаграмма>>attach:2023-02-19_17-12-14.png]]);
235 1*. line3D ([[линии с эффектом 3D>>attach:2023-02-19_17-55-07.png]]);
236 1*. xy_area ([[область в координатах>>attach:R.png]]);
237 1*. xy_line_and_shape ([[линии в координатах и с точками в узлах>>attach:2023-02-19_17-13-11.png]]);
hrapitan 29.1 238 1*. xy_line3D ([[линии в координатах и с эффектом 3D>>attach:2023-02-19_17-13-48.png]]);
239 1*. xy_step ([[состояния>>attach:2023-02-19_17-17-57.png]]).
hrapitan 13.1 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 === Параметры графиков/диаграмм ===
hrapitan 30.1 248
249
250 Поле "**Параметры**" служит для определения условий построения графиков и диаграмм. В него вносится список сопоставлений имени параметра со значением, разделителем между параметром и значением служит знак "(% style="color:#16a085" %)**:**(%%)", а между парами <//параметр: значение//> — знак "(% style="color:#16a085" %)**;**(%%)".
251
252 ==== Параметры построения ====
253
254 |=Имя параметра|=Возможные значения|=Описание
255 |range|(%%)(% style="color:#16a085" %)//A1-..//|Определяет диапазон ячеек таблицы, используемых для построения графика.  Порядковый номер столбца ячейки обозначается заглавной буквой латинского алфавита, а номер строки — арабской цифрой. Синтаксис: "(% style="color:#16a085" %)range:N#-M~#~#(%%)", где N и M — заглавные латинские буквы, обозначающие начальный и конечный столбцы диапазона, а # и ~#~# — арабские цифры, обозначающие начальную и конечную строки диапазона. Пример записи диапазона: "(% style="color:#16a085" %)//range:B2-D5//(%%)".
256 |series|(% bis_skin_checked="1" %)(% bis_skin_checked="1" %)
257 (((
258 (% style="color:#16a085" %)//columns//(%%)
259 (% style="color:#16a085" %)//rows//
260 )))|(% bis_skin_checked="1" %)(% bis_skin_checked="1" %)
261 (((
262 Определяет ориентацию осей графика (x/y) относительно колонок таблицы. Пример записи диапазона: "(% style="color:#16a085" %)//series:columns//(%%)"
263 )))
264
265 (% class="wikigeneratedid" %)
266 Поддерживаются также **дополнительные параметры** построения, наборы которых завися от типа графиков. Подробные сведения можно получить из [[документации>>https://java-online.ru/jfreechart-attributes.xhtml||rel="noopener noreferrer" target="_blank"]].
267
268 ==== Визуальные параметры ====
269
270 |=Имя параметра|=Значение по умолчанию|=Описание
271 |backgroundColor|Grey background|Цвет фона области, не относящейся к диаграмме; задается с использованием шестнадцатеричной системы счисления, например FFAACC (первые 2 буквы соответствуют красному цвету, следующие 2 — зеленому, а последние 2 — синему)
272 |plotBackgroundColor|White|Цвет фона области графика (в шестнадцатеричном виде)
273 |plotBorderColor|Black|Цвет границы графика (в шестнадцатеричном виде)
274 |borderColor|Black|Цвет внешней границы графа (в шестнадцатеричном виде)
275 |legendBackgroundColor|White|Цвет фона поля легенды (в шестнадцатеричном виде)
276 |plotBorderVisible|true|Видимость границы области графика. Допустимые значения (% style="color:#16a085" %)//true// (%%)и (% style="color:#16a085" %)//false//
277 |legendVisible|true|Отображение легенды. Допустимые значения (% style="color:#16a085" %)//true// (%%)и (% style="color:#16a085" %)//false//
278
279 ==== Дополнительные параметры для круговых диаграмм ====
280
281 |=Имя параметра|=Значение по умолчанию|=Описание
282 |pie_label_format|{0}|Формат метки для сегментов круговой диаграммы. Используйте {0} там, где должен быть вставлен ключ круговой секции, {1} для абсолютного значения секции и {2} для процентной суммы круговой секции, например, {0} = {1} ({2}) будет отображаться как «яблоко = 120 (5%)»
283
284 === {{id name="inline"/}}Типы источников данных и режимы визуализации ===
285
286 Расширение "**Chart**" поддерживает два режима работы — "(% style="color:#16a085" %)**inline**(%%)" и "(% style="color:#16a085" %)**xdom**(%%)", которые определяют тип источника данных:
287
288 * в режиме "(% style="color:#16a085" %)**inline**(%%)" для построения графиков используются встроенные данные, которые вносятся непосредственно в макросе;
289 * в режиме "(% style="color:#16a085" %)**xdom**(%%)" для построения графиков и диаграмм используются таблицы данных, расположенные в пределах вики.
290
291 Рассмотрим оба варианта использования макроса.
292
293
294 ==== Визуализация в режиме "**inline**" ====
295
296 В этом режиме макрос строит диаграммы и графики на основе данных, вносимых непосредственно в макросе. Данные вносятся в поле "**Содержимое**" в виде таблицы, записанной на языке разметки вики-страницы.
hrapitan 31.1 297
298
299 [[image:2023-02-19_19-43-36.png]]
300
301
302 При этом в поле "**Параметры**" можно определять диапазон ячеек таблицы, используемых в качестве поставщика данных. Порядковый номер столбца ячейки обозначается заглавной буквой латинского алфавита, а номер строки — арабской цифрой. В приведенном примере для построения графиков используются ячейки столбцов со 2 по 4 и строк со 2 по 5, это описывается выражением "(% style="color:#16a085" %)//range:B2-D5//(%%)".
303
304 В поле "**Источник**" макроса должно значится "(% style="color:#16a085" %)//inline//(%%)".
305
306
307 ==== Визуализация в режиме "**xdom**" ====
308
309 Для использования этого варианта в поле "**Источник**" макроса должно значится "(% style="color:#16a085" %)//xdom//(%%)".
310
311 В данном режиме макрос строит диаграммы и графики на основе данных, содержащихся в таблице на какой-либо странице в пределах вики. Для того, чтобы макрос работал, таблице необходимо присвоить идентификатор, используя код в режиме источника:
312
313 (% bis_skin_checked="1" class="box" %)
314 (((
315 ~(% id="//произвольный_идентификатор//" %)
316 )))
317
318 Рассмотрим процесс на примере страницы с двумя таблицами:
319
hrapitan 32.1 320
321 [[image:1678526683284-692.png]]
322
323
324 В режиме источника каждой из таблиц мы присвоили идентификаторы ("(% style="color:#16a085" %)//table1//(%%)" и "(% style="color:#16a085" %)//table2//(%%)"), сохранили изменения, а затем скопировали адрес этой страницы (вкладка "**Информация**", поле "**Ссылка на страницу**" ).
325
326 Осталось внести эти данные в макрос.
327
328 В начало строки поля "**Параметры**" добавляем 2 параметра:
329
330 * первым идет параметр "//document~://", за которым следует скопированная ссылка на страницу с таблицей;
331 * вторым следует параметр "//table~://", за которым идет идентификатор нужной нам таблицы.
332
333 **Схема записи:**
334
335 (% bis_skin_checked="1" class="box" %)
336 (((
337 document:<//ссылка на страницу//>;table:<//идентификатор таблицы//>;
338 )))
339
340 В поле "**Источник**" ставим тип "(% style="color:#16a085" %)**//xdom//**(%%)".
341
342 Таблицу 1 из примера мы используем для создания линейных графиков. Окно макроса для нее будет [[выглядеть так>>attach:2023-02-20_11-34-28.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]].
343
344 **Код макроса в разметке**:
345
346 (% bis_skin_checked="1" class="box" %)
347 (((
348 ~{~{chart type="(% style="color:#f39c12" %)line(%%)" params="document:(% style="color:#f39c12" %)База знаний.Работа в XWIKI.Советы и рецепты.Diagrams Schemes Graphs.Tablitsy-s-dannymi-dlia-grafikov.WebHome(%%);table:(% style="color:#f39c12" %)table1(%%);range:B2-D5;series:columns;" source="(% style="color:#f39c12" %)xdom(%%)"}}~{~{/chart}}
349 )))
350
351 В нем тип графика, адрес страницы, идентификатор таблицы и тип источника данных выделены рыжим.
352
353 **Результат рендеринга макроса из Таблицы 1:**
354
355