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

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

Сводка

Подробности

Свойства страницы
Содержимое
... ... @@ -235,8 +235,8 @@
235 235  1*. line3D ([[линии с эффектом 3D>>attach:2023-02-19_17-55-07.png]]);
236 236  1*. xy_area ([[область в координатах>>attach:R.png]]);
237 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]]).
238 +1*. xy_line3D (линии в координатах и с эффектом 3D);
239 +1*. xy_step (состояния).
240 240  1. В поле "**Содержимое**" вносятся данные для визуализации в режиме "(% style="color:#16a085" %)**inline**(%%)" (подробности ниже).
241 241  1. В поле "**Высота**" при желании можно задать высоту графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix.
242 242  1. В поле "**Параметры**" вносятся дополнительные настройки для построения графиков. Эта строка содержит список сопоставлений имени параметра со значением. Доступные имена и значения параметров зависят от используемого источника данных (подробности ниже).
... ... @@ -245,233 +245,3 @@
245 245  1. В поле "**Ширина**" при желании можно задать ширину графика в пикселях. По умолчанию график будет отрисован в размере 300x400 pix.
246 246  
247 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 -[[image:2023-02-20_12-41-34.png||height="305" width="400"]]
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 -(% bis_skin_checked="1" class="box" %)
363 -(((
364 -~{~{chart type="(% style="color:#f39c12" %)pie(%%)" params="document:(% style="color:#f39c12" %)База знаний.Работа в XWIKI.Советы и рецепты.Diagrams Schemes Graphs.Tablitsy-s-dannymi-dlia-grafikov.WebHome(%%);table:(% style="color:#f39c12" %)table2(%%);range:B2-D5;series:columns;" source="(% style="color:#f39c12" %)xdom(%%)"}}~{~{/chart}}
365 -)))
366 -
367 -В нем тип графика, адрес страницы, идентификатор таблицы и тип источника данных выделены рыжим.
368 -
369 -**Результат рендеринга макроса из Таблицы 2:**
370 -
371 -[[image:2023-02-20_12-41-52.png||height="306" width="400"]]
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:image-20230218113157-1.png]](% id="cke_bm_33056S" style="display:none" %) [[image:image-20230218113157-1.png]](%%) "Источник" и посмотреть код макроса. Возможно, затесались лишние знаки или, наоборот, отсутствует отбивка строкой. Для некоторых макросов это критично.
474 -
475 -Как видим, наша платформа предоставляет обширный инструментарий для создания самых разнообразных диаграмм, графиков и схем. Можно использовать визуальный редактор, а можно строить на основе табличных данных, либо описывать диаграммы языком UML — выбор за вами! 
476 -😄
477 -
1678526683284-692.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -212.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_19-43-36.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.hp
Размер
... ... @@ -1,1 +1,0 @@
1 -119.9 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
Содержимое