Диаграммы Схемы Графики

== **Возможности платформы** ==

Платформа XWiki предоставляет богатый инструментарий для работы с разнообразными диаграммами, схемами и графиками. При этом у нас есть возможность рисовать их в графическом редакторе, визуализировать на основе данных, либо использовать языки построения диаграмм. Все эти фичи реализованы с помощью специальных расширений и макросов.

8

9

На данный момент наша платформа имеет следующие расширения для работы с диаграммами, схемами и графиками:

10

11

* **Diagram (draw.io)** — приложение, позволяющее рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный графический редактор;

12

* **PlantUML** — макрос, позволяющий отображать диаграммы и схемы, описанные языком UML;

13

* **График (Chart) **— расширение, позволяющее строить всевозможные графики и диаграммы на основе табличных данных.

14

15

Рассмотрим все эти инструменты по порядку.

----

== **Отрисовка диаграмм в визуальном редакторе draw.io** ==

20

21

Расширение "**Diagram**" позволяет рисовать диаграммы и схемы непосредственно в XWiki, используя визуальный редактор draw.io. Несколько вводных о нем дано в [[статье "В XWiki можно легко создавать диаграммы">>doc:Stati.Metodiki-primeneniia-XWiki.V-XWiki-mozhno-legko-sozdavat-diagrammy.WebHome]], рассмотрим его здесь немного подробнее.

22

23

Принцип работы с данным расширением таков: в определенную нами для размещения диаграммы позицию статьи вставляем макрос "**Diagram**", используя окно выбора макросов, как показано на рисунке:

24

25

26

[[image:2023-02-18_11-16-47.png]]

27

28

29

В поле "**Reference**" макроса необходимо задать обозначение будущей диаграммы, оно будет использовано для создания дочерней страницы с диаграммой. В данном примере мы использовали обозначение "(% style="color:#16a085" %)**//Diagram 1//**(%%)".

30

31

То же самое можно сделать, перейдя с помощью кнопки [[image:2021-09-24_100802.png]] "**Источник**" в режим разметки и вставив код макроса:

32

33

(% class="box" bis_skin_checked="1" %)

34

(((

35

~{~{diagram reference="Diagram 1"/}}

36

)))

37

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.

----

== **Работа с диаграммами на языке 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//

~{~{/plantuml}}

)))

Адрес сервера обработки указывать не нужно, он задан в админке XWIKI. Но если вдруг после сохранения статьи визуализация не происходит — проверьте код UML и, если он в порядке, попробуйте указать адрес сервера обработки UML вручную.

78

79

=== Примеры использования PlantUML ===

==== Блок-схема ====

@startuml

start

:Check eax.me for new posts;

91

92

while (There are new posts?) is (Yes);

:Read one post;

:Share;

:Leave comments;

endwhile (No);

stop

@enduml

==== Диаграммы последовательности ====

@startuml

actor User

participant Nginx

participant Application

database PostgreSQL

autonumber 1

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

@enduml

==== Временная диаграмма ====

@startuml

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

@6 as :write_beg

@10 as :write_end

@15 as :read_beg

@19 as :read_end

@0

en is low

db is "0x0"

addr is "0x03f"

rw is low

dv is 0

@:write_beg-3

en is high

@:write_beg-2

db is "0xDEADBEEF"

@:write_beg-1

dv is 1

@:write_beg

rw is high

@:write_end

rw is low

dv is low

@:write_end+1

rw is low

db is "0x0"

addr is "0x23"

@12

dv is high

@13

db is "0xFFFF"

@20

en is low

dv is low

@21

db is "0x0"

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

@enduml

----

== **Визуализация данных с помощью 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~://", за которым идет идентификатор нужной нам таблицы.

**Схема записи:**

(% 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" %)Stati.Funktsii-XWiki.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:Stati.Funktsii-XWiki.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" %)Stati.Funktsii-XWiki.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:Stati.Funktsii-XWiki.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

379

{{chart type="bar" params="range:B2-D5;series:columns;" source="inline"}}

380

|= |=Array1|=Array2|=Array3

|=Q1|1.2|3.4|1.3

|=Q2|4.5|3.4|2.3

|=Q3|1.2|4.5|9.0

|=Q4|3.4|1.2|1.2

==== Временная диаграмма с узловыми метками и тенями ====

390

391

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

|2001-2|181.8|129.6

|2001-3|167.3|123.2

|2001-4|153.8|117.2

|2001-5|167.6|124.1

|2001-6|158.8|122.6

|2001-7|148.3|119.2

|2001-8|153.9|116.5

|2001-9|142.7|112.7

|2001-10|123.2|101.5

|2001-11|131.8|106.1

|2001-12|139.6|110.3

|2002-1|142.9|111.7

|2002-2|138.7|111.0

|2002-3|137.3|109.6

|2002-4|143.9|113.2

|2002-5|139.8|111.6

|2002-6|137.0|108.8

|2002-7|132.8|101.6

==== Стековая диаграмма ====

417

418

419

{{chart type="stackedbar" params="range:B2-D5;series:columns;" source="inline"}}

420

|= |=Array1|=Array2|=Array3

|=Q1|1.2|3.4|1.3

|=Q2|4.5|3.4|2.3

|=Q3|1.2|4.5|9.0

|=Q4|3.4|1.2|1.2

==== Круговая диаграмма с пользовательскими цветами ====

430

431

432

{{chart type="pie" params="range:B1-D4;series:columns;colors:C3E3F7,1D9FF5,015891,012A45" source="inline"}}

|=Sec1|1.2|3.4|1.3

|=Sec2|4.5|3.4|2.3

|=Sec3|1.2|4.5|9.0

|=Sec4|3.4|1.2|1.2

==== Стековая 3D-диаграмма ====

442

443

444

{{chart type="stackedbar3D" params="range:B2-D5;series:columns;" source="inline"}}

445

|= |=Array1|=Array2|=Array3

|=Q1|1.2|3.4|1.3

|=Q2|4.5|3.4|2.3

|=Q3|1.2|4.5|9.0

|=Q4|3.4|1.2|1.2

==== График с эффектом 3D ====

455

456

457

{{chart type="line3D" params="range:B2-D5;series:columns;" source="inline"}}

458

|= |=Line1|=Line2|=Line3

|=Q1|1.2|3.4|1.3

|=Q2|4.5|3.4|2.3

|=Q3|1.2|4.5|9.0

|=Q4|3.4|1.2|1.2

----

== **Выводы и рекомендации** ==

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 — выбор за вами! 😄

----

**Данная статья добавлена нашим подписчиком {{mention reference="XWiki.hp" style="FULL_NAME" anchor="XWiki-hp-qvk8wq"/}} за что ему большое спасибо!**

480

481

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

Навигация