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

Сводка

• Свойства страницы (1 изменено, 0 добавлено, 0 удалено)
• Вложения (0 изменено, 6 добавлено, 0 удалено)
  • 1678526683284-692.png
  • 2023-02-19_19-43-36.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

Подробности

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

Содержимое

...	...	@@ -294,3 +294,184 @@
294	294	==== Визуализация в режиме "**inline**" ====
295	295
296	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,0 +1,1 @@
	1	+XWiki.hp

Размер

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

Содержимое

2023-02-19_19-43-36.png

Author

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

Размер

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

Содержимое

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

Author

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

Размер

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

Содержимое

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

Author

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

Размер

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

Содержимое

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

Author

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

Размер

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

Содержимое

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

Author

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

Размер

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

Содержимое