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

Редактировал(а) Coluns 31.03.2023
От версии 33.1
отредактировано hrapitan
на 11.03.2023
Изменить комментарий: Загрузить новое изображение 2023-02-20_12-41-34.png
К версии 3.1
отредактировано hrapitan
на 11.03.2023
Изменить комментарий: К данной версии нет комментариев

Сводка

Подробности

Свойства страницы
Содержимое
... ... @@ -2,8 +2,9 @@
2 2  {{toc start="2"/}}
3 3  {{/box}}
4 4  
5 -== **Возможности платформы** ==
6 6  
6 +== Возможности платформы ==
7 +
7 7  Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.
8 8  
9 9  На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:
... ... @@ -14,9 +14,8 @@
14 14  
15 15  Рассмотрим все эти инструменты по порядку.
16 16  
17 -----
18 18  
19 -== **Отрисовка диаграмм в визуальном редакторе draw.io** ==
19 +== Отрисовка диаграмм в визуальном редакторе 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  
... ... @@ -23,7 +23,7 @@
23 23  Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:
24 24  
25 25  
26 -[[image:2023-02-18_11-16-47.png]]
26 +[[image:2023-02-18_11-16-47.png||height="423" width="900"]]
27 27  
28 28  
29 29  В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)".
... ... @@ -36,320 +36,3 @@
36 36  )))
37 37  
38 38  В обоих случаях после сохранения страницы в выбранном нами месте статьи появляется кнопка "**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 ([[линии>>attach:2023-02-19_17-37-57.png]]);
229 -1*. area ([[области>>attach:2023-02-19_17-35-35.png]]);
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]]);
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]]).
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 -=== Параметры графиков/диаграмм ===
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 -В этом режиме макрос строит диаграммы и графики на основе данных, вносимых непосредственно в макросе. Данные вносятся в поле "**Содержимое**" в виде таблицы, записанной на языке разметки вики-страницы.
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 -
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 -
1678526683284-692.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -212.8 KB
Содержимое
2023-02-18_11-33-52_cr.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -114.3 KB
Содержимое
2023-02-18_11-48-22-2.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -207.3 KB
Содержимое
2023-02-18_17-41-18.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -208.9 KB
Содержимое
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
Содержимое
2023-02-19_17-12-14.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -28.2 KB
Содержимое
2023-02-19_17-13-11.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -68.0 KB
Содержимое
2023-02-19_17-13-48.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -77.8 KB
Содержимое
2023-02-19_17-17-57.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -56.0 KB
Содержимое
2023-02-19_17-35-35.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -42.2 KB
Содержимое
2023-02-19_17-37-57.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -53.7 KB
Содержимое
2023-02-19_17-40-50.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -30.9 KB
Содержимое
2023-02-19_17-49-50.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -22.9 KB
Содержимое
2023-02-19_17-52-19.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -40.6 KB
Содержимое
2023-02-19_17-52-57.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -26.0 KB
Содержимое
2023-02-19_17-55-07.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -86.3 KB
Содержимое
2023-02-19_19-43-36.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -119.9 KB
Содержимое
2023-02-20_12-41-34.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -35.5 KB
Содержимое
R.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -10.3 KB
Содержимое