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

Сводка

• Свойства страницы (2 изменено, 0 добавлено, 0 удалено)
• Вложения (0 изменено, 0 добавлено, 25 удалено)
  • 1678526683284-692.png
  • 2023-02-18_11-33-52_cr.png
  • 2023-02-18_11-48-22-2.png
  • 2023-02-18_17-41-18.png
  • 2023-02-19_15-58-06.png
  • 2023-02-19_16-50-57.png
  • 2023-02-19_17-12-14.png
  • 2023-02-19_17-13-11.png
  • 2023-02-19_17-13-48.png
  • 2023-02-19_17-17-57.png
  • 2023-02-19_17-35-35.png
  • 2023-02-19_17-37-57.png
  • 2023-02-19_17-40-50.png
  • 2023-02-19_17-49-50.png
  • 2023-02-19_17-52-19.png
  • 2023-02-19_17-52-57.png
  • 2023-02-19_17-55-07.png
  • 2023-02-19_19-43-36.png
  • 2023-02-20_09-00-49.png
  • 2023-02-20_11-34-28.png
  • 2023-02-20_12-19-01.png
  • 2023-02-20_12-41-34.png
  • 2023-02-20_12-41-52.png
  • 2023-02-21_12-36-23.png
  • R.png

Подробности

Свойства страницы

Автор документа

...	...	@@ -1,1 +1,1 @@
1		-XWiki.coluns
	1	+XWiki.hp

Содержимое

...	...	@@ -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
...	...	@@ -23,7 +23,7 @@
23	23	Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:
24	24
25	25
26		-[[image:2023-02-18_11-16-47.png]]
	25	+[[image:2023-02-18_11-16-47.png||height="423" width="900"]]
27	27
28	28
29	29	В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)".
...	...	@@ -30,452 +30,9 @@
30	30
31	31	То же самое можно сделать, перейдя с помощью кнопки [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:
32	32
33		-(% class="box" bis_skin_checked="1" %)
	32	+(% bis_skin_checked="1" class="box" %)
34	34	(((
35	35	~{~{diagram reference="Diagram 1"/}}
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		-(% class="box" bis_skin_checked="1" %)
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		-(% class="box" bis_skin_checked="1" %)
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**(%%)" (подробности [[ниже>>doc:||anchor="inline"]]).
241		-1. В поле "**Высота**" при желании можно задать высоту графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix.
242		-1. В поле "**Параметры**" вносятся дополнительные настройки для построения графиков. Эта строка содержит список сопоставлений имени параметра со значением. Доступные имена и значения параметров зависят от используемого источника данных (подробности ниже).
243		-1. В поле "**Источник**" указывается один из двух типов источника данных  — "(% style="color:#16a085" %)**inline**(%%)" и "(% style="color:#16a085" %)**xdom**(%%)" (подробности [[ниже>>doc:||anchor="inline"]]).
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		-(% class="box" bis_skin_checked="1" %)
314		-(((
315		-~(% id="//произвольный_идентификатор//" %)
316		-)))
317		-
318		-Рассмотрим процесс на примере страницы с двумя таблицами:
319		-
320		-
321		-[[image:2023-02-20_09-00-49.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		-(% class="box" bis_skin_checked="1" %)
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		-(% class="box" bis_skin_checked="1" %)
347		-(((
348		-~{~{chart type="(% style="color:#f39c12" %)line(%%)" params="document:(% style="color:#f39c12" %)Sandbox.Diagrammy-Skhemy-Grafiki.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		-{{chart type="line" params="document:Sandbox.Diagrammy-Skhemy-Grafiki.Tablitsy-s-dannymi-dlia-grafikov.WebHome;table:table1;range:B2-D5;series:columns;" source="xdom"}}{{/chart}}
356		-
357		-
358		-Таблицу 2 из примера мы используем для создания круговой диаграммы. Окно макроса для нее будет [[выглядеть так>>attach:2023-02-20_12-19-01.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]].
359		-
360		-**Код макроса в разметке**:
361		-
362		-(% class="box" bis_skin_checked="1" %)
363		-(((
364		-~{~{chart type="(% style="color:#f39c12" %)pie(%%)" params="document:(% style="color:#f39c12" %)Sandbox.Diagrammy-Skhemy-Grafiki.Tablitsy-s-dannymi-dlia-grafikov.WebHome(%%);table:(% style="color:#f39c12" %)table2(%%);range:B1-D4;series:columns;" source="(% style="color:#f39c12" %)xdom(%%)"}}~{~{/chart}}
365		-)))
366		-
367		-В нем тип графика, адрес страницы, идентификатор таблицы и тип источника данных выделены рыжим.
368		-
369		-**Результат рендеринга макроса из Таблицы 2:**
370		-
371		-{{chart type="pie" params="document:Sandbox.Diagrammy-Skhemy-Grafiki.Tablitsy-s-dannymi-dlia-grafikov.WebHome;table:table2;range:B1-D4;series:columns;" source="xdom"}}{{/chart}}
372		-
373		-
374		-=== Примеры использования **Chart **Extension ===
375		-
376		-==== Столбчатая диаграмма ====
377		-
378		-{{example}}
379		-{{chart type="bar" params="range:B2-D5;series:columns;" source="inline"}}
380		-|= |=Array1|=Array2|=Array3
381		-|=Q1|1.2|3.4|1.3
382		-|=Q2|4.5|3.4|2.3
383		-|=Q3|1.2|4.5|9.0
384		-|=Q4|3.4|1.2|1.2
385		-{{/chart}}
386		-{{/example}}
387		-
388		-
389		-==== Временная диаграмма с узловыми метками и тенями ====
390		-
391		-{{example}}
392		-{{chart type="xy_line3D" params="range:B2-C19;dataset:timetable_xy;domain_axis_type:date;domain_axis_date_format:MMM-yyyy;date_format:yyyy-MM;time_period:month;range_axis_lower:100;range_axis_upper:190" title="Графики"}}
393		-|=|=График 1|=График 2
394		-|2001-2|181.8|129.6
395		-|2001-3|167.3|123.2
396		-|2001-4|153.8|117.2
397		-|2001-5|167.6|124.1
398		-|2001-6|158.8|122.6
399		-|2001-7|148.3|119.2
400		-|2001-8|153.9|116.5
401		-|2001-9|142.7|112.7
402		-|2001-10|123.2|101.5
403		-|2001-11|131.8|106.1
404		-|2001-12|139.6|110.3
405		-|2002-1|142.9|111.7
406		-|2002-2|138.7|111.0
407		-|2002-3|137.3|109.6
408		-|2002-4|143.9|113.2
409		-|2002-5|139.8|111.6
410		-|2002-6|137.0|108.8
411		-|2002-7|132.8|101.6
412		-{{/chart}}
413		-{{/example}}
414		-
415		-
416		-==== Стековая диаграмма ====
417		-
418		-{{example}}
419		-{{chart type="stackedbar" params="range:B2-D5;series:columns;" source="inline"}}
420		-|= |=Array1|=Array2|=Array3
421		-|=Q1|1.2|3.4|1.3
422		-|=Q2|4.5|3.4|2.3
423		-|=Q3|1.2|4.5|9.0
424		-|=Q4|3.4|1.2|1.2
425		-{{/chart}}
426		-{{/example}}
427		-
428		-
429		-==== Круговая диаграмма с пользовательскими цветами ====
430		-
431		-{{example}}
432		-{{chart type="pie" params="range:B1-D4;series:columns;colors:C3E3F7,1D9FF5,015891,012A45" source="inline"}}
433		-|=Sec1|1.2|3.4|1.3
434		-|=Sec2|4.5|3.4|2.3
435		-|=Sec3|1.2|4.5|9.0
436		-|=Sec4|3.4|1.2|1.2
437		-{{/chart}}
438		-{{/example}}
439		-
440		-
441		-==== Стековая 3D-диаграмма ====
442		-
443		-{{example}}
444		-{{chart type="stackedbar3D" params="range:B2-D5;series:columns;" source="inline"}}
445		-|= |=Array1|=Array2|=Array3
446		-|=Q1|1.2|3.4|1.3
447		-|=Q2|4.5|3.4|2.3
448		-|=Q3|1.2|4.5|9.0
449		-|=Q4|3.4|1.2|1.2
450		-{{/chart}}
451		-{{/example}}
452		-
453		-
454		-==== График с эффектом 3D ====
455		-
456		-{{example}}
457		-{{chart type="line3D" params="range:B2-D5;series:columns;" source="inline"}}
458		-|= |=Line1|=Line2|=Line3
459		-|=Q1|1.2|3.4|1.3
460		-|=Q2|4.5|3.4|2.3
461		-|=Q3|1.2|4.5|9.0
462		-|=Q4|3.4|1.2|1.2
463		-{{/chart}}
464		-{{/example}}
465		-
466		-----
467		-
468		-== **Выводы и рекомендации** ==
469		-
470		-Пара рекомендаций при работе с рассмотренными макросами и расширениями:
471		-
472		-1. Обратите внимание на [[синтаксис страницы>>attach:2023-02-21_12-36-23.png||onclick="window.open(this.href, '', 'resizable=no,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no'); return false;"]]. По умолчанию статьи создаются в синтаксисе XWiki 2.1, в нем все расширения XWiki работают полноценно. Если при создании вы выбираете иной синтаксис — будьте готовы к тому, что расширения могут работать c ограничениями или вовсе не поддерживаться.
473		-1. Если возникают ошибки визуализации, попробуйте перейти в режим разметки, используя кнопку [[image:2021-09-24_100802.png]](% id="cke_bm_33056S" style="display:none" %) [[image:image-20230218113157-1.png]](%%) "**Источник**" и посмотреть код макроса. Возможно, затесались лишние знаки или, наоборот, отсутствует отбивка строкой. Для некоторых макросов это критично.
474		-
475		-Как видим, платформа XWiki предоставляет обширный инструментарий для создания самых разнообразных диаграмм, графиков и схем. Можно использовать визуальный редактор, а можно строить на основе табличных данных, либо описывать диаграммы языком UML — выбор за вами! 😄
476		-
477		-----
478		-
479		-**Данная статья добавлена нашим подписчиком {{mention reference="XWiki.hp" style="FULL_NAME" anchor="XWiki-hp-qvk8wq"/}} за что ему большое спасибо!**
480		-
481		-{{cl-plate-help/}}

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		-112.7 KB

Содержимое

2023-02-18_11-48-22-2.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-172.6 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_09-00-49.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-168.8 KB

Содержимое

2023-02-20_11-34-28.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-46.4 KB

Содержимое

2023-02-20_12-19-01.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-46.8 KB

Содержимое

2023-02-20_12-41-34.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-35.5 KB

Содержимое

2023-02-20_12-41-52.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-37.6 KB

Содержимое

2023-02-21_12-36-23.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-26.3 KB

Содержимое

R.png

Author

...	...	@@ -1,1 +1,0 @@
1		-XWiki.hp

Размер

...	...	@@ -1,1 +1,0 @@
1		-10.3 KB

Содержимое