Тептар

Модуль:Chart/doc

< Модуль:Chart

Это страница документации Модуль:Chart.

Скопировано с модуля англовики en:Module:Chart.

Модуль для показа в статьях гистограмм и круговых диаграмм.

ГистограммыПравить

См. также: Шаблон:Bar box (для столбиков по оси Y)
 
Гистограмма

Гистогра́мма (от Шаблон:Lang-grc— столб + γράμμα — черта, буква, написание) — способ графического представления табличных данных, где количественные соотношения представлены в виде прямоугольников.
Известна также как линейчатая диаграмма (в документации Microsoft Office) и столбиковая диаграмма (в финансово-экономических изданиях), англ. bar chart.
Выводится командой {{ #invoke:Chart | bar chart | параметры ...}}

ПараметрыПравить

параметр назначение
delimiter строка-разделитель нескольких значений в строке, по умолчанию двоеточие ( : ). Не следует без нужды переопределять значение по умолчанию. Однако если внутри самих значений встречается двоеточие, этот параметр окажется полезным.
width ширина гистограммы в пикселях без "px", по умолчанию 500. Минимальное допустимое значение 200.
height высота гистограммы в пикселях без "px", по умолчанию 350. Минимальное допустимое значение 200.
group n (где "n" число — от "group 1" до количества групп на гистограмме) значения для показа, см. ниже.
tooltip n всплывающая подсказка для отдельного столбика. Если для столбика не задана подсказка, но тот является ссылкой, ссылка будет использована как подсказка. Если и ссылки нет, по подсказка будет создана комбинацией названия группы и значения с "units prefix" и "units suffix", если заданы.
links n ссылки на статьи для отдельных столбиковr
stack группировать или нет группы поверх друг друга (гистограмма с группировкой). Любое непустое значение равно "да". Для "нет" просто не указывайте этот параметр или оставьте его значение пустым.
tooltip value accumulation имеет смысл только при включённом stack выше. Если "да", всплывающая подсказка показывает общее значение всех блоков до текущего включительно.
colors цвета для различных групп. Должно быть ровно столько значений, сколько самих групп. Может быть одно из стандартных названий или в формате RGB, например, #C0C0C0.
x legends Легенды для значений, помещаемые под осью X. Можно использовать вики-разметку, например, внутренние ссылки или шаблоны.
hide group legends если "да", легенды не выводятся.
scale per group отдельные оси Y для каждой группы. Рекомендуется оставить пустым и использовать единную ось для всей гистограммы. Несовместимо с режимом "stack".
units prefix "префикс" значений для всплывающей подсказки, например, $, чтобы значение "500" показывалось как "$500".
units suffix "суффикс" значений для всплывающей подсказки, например, ms, чтобы значение "500" показывалось как "500ms". Знак подчёркивания заменяется пробелом: чтобы задать суффикс % через пробел, используйте _%
group names названия групп

ПримерыПравить

Базовый примерПравить

{{ #invoke:Chart | bar chart
| group names = Яблоки : Бананы : Апельсины
| colors = green : yellow : orange
| group 1 = 40 : 50 : 60 <!-- комментарий: Яблоки -->
| group 2 = 20 : 60 : 12 <!-- комментарий: Бананы -->
| group 3 = 55 : 14 : 33 <!-- комментарий: Апельсины -->
| units suffix = _кг
| x legends = Перед : В течение : После
}}
10
20
30
40
50
60
70
Перед
В течение
После
  •   Яблоки
  •   Бананы
  •   Апельсины

Гистограмма с накоплениемПравить

Та же гистограмма с накоплением (англ. stacked column chart): 

{{ #invoke:Chart | bar chart
| group names = Яблоки : Бананы : Апельсины
| colors = green : yellow : orange
| group 1 = 40 : 50 : 60
| group 2 = 20 : 60 : 12
| group 3 = 55 : 14 : 33
| units suffix = _кг
| x legends = Перед : В течение : После
| stack = yes <!-- комментарий: on, 1, true, любое непустое значение -->
}}
25
50
75
100
125
150
Перед
В течение
После
  •   Яблоки
  •   Бананы
  •   Апельсины

Гистограмма с накоплением и с большим количеством группПравить

Приводится более для демонстрации возможностей программы и показа, как такая гистограмма будет выглядеть на странице. 

{{ #invoke:Chart | bar chart
| width = 800
| height = 550
| group 1 = 1:2:3:4:5:4:3:2:1
| group 2 = 1:2:3:4:5:4:3:2:1
| group 3 = 1:2:3:4:5:4:3:2:1
| group 4 = 1:2:3:4:5:4:3:2:1
| group 5 = 1:2:3:4:5:4:3:2:1
| group 6 = 1:2:3:4:5:4:3:2:1
| group 7 = 1:2:3:4:5:4:3:2:1
| group 8 = 1:2:3:4:5:4:3:2:1
| group 9 = 1:2:3:4:5:4:3:2:1
| group 10 = 1:2:3:4:5:4:3:2:1
| group 11 = 1:2:3:4:5:4:3:2:1
| group 12 = 1:2:3:4:5:4:3:2:1
| group 13 = 1:2:3:4:5:4:3:2:1
| group 14 = 1:2:3:4:5:4:3:2:1
| group 15 = 1:2:3:4:5:4:3:2:1
| group 16 = 1:2:3:4:5:4:3:2:1
| group 17 = 1:2:3:4:5:4:3:2:1
| group 18 = 1:2:3:4:5:4:3:2:1
| group 19 = 1:2:3:4:5:4:3:2:1
| group 20 = 1:2:3:4:5:4:3:2:1
| group 21 = 1:2:3:4:5:4:3:2:1
| colors = Silver:Gray:Black:Red:Maroon:Yellow:Olive:Lime:Green:Aqua:Teal:Blue:Navy:Fuchsia:Purple:ForestGreen:Tomato:LightSeaGreen:RosyBrown:DarkOliveGreen:MediumVioletRed
| group names = Алабама:Аляска:Аризона:Арканзас:Калифорния:Колорадо:Коннектикут:Делавэр:Флорида:Джорджия:	Гавайи:Айдахо:Иллинойс:Индиана:Айова:Канзас:Кентукки:Луизиана:Мэн:Мериленд:Массачусетс
| x legends = 1920 : 1930 : 1940: 1950 : 1960 : 1970 : 1990 : 2000 : 2010
| units prefix = $
| units suffix = _млрд
| stack = 1
}}
25
50
75
100
125
150
1920
1930
1940
1950
1960
1970
1990
2000
2010
  •   Алабама
  •   Аляска
  •   Аризона
  •   Арканзас
  •   Калифорния
  •   Колорадо
  •   Коннектикут
  •   Делавэр
  •   Флорида
  •   Джорджия
  •   Гавайи
  •   Айдахо
  •   Иллинойс
  •   Индиана
  •   Айова
  •   Канзас
  •   Кентукки
  •   Луизиана
  •   Мэн
  •   Мериленд
  •   Массачусетс

Отдельные оси Y для каждой группыПравить

Можно показывать каждую группу с отдельной осью Y и со своей единицей измерения. Обратите внимание, что нам не нужен units prefix для первых двух групп, поэтому ставится двоеточие без значения за ним. Можно писать и без пробелов: ::$ вместо  : : $. Также задана отдельная всплывающая подсказка для "Автомобили" за 1965 год. 

{{ #invoke:Chart | bar chart
| width = 800
| group 1 = 1500000 : 2500000 : 3500000
| group 2 = 200 : 5000 : 45000
| group 3 = 2000 : 5000 : 20000
| colors = red : blue : green
| group names = Население : Автомобили : Средняя стоимость
| x legends = 1920 : 1965 : 2002
| tooltip 2 = : За 1965 нет точных сведений о числе автомобилей. Указано 5000 как наилучшее приближение.
| units prefix = : : $
| scale per group = 1
}}
1 000 000
2 000 000
3 000 000
4 000 000
10 000
20 000
30 000
40 000
50 000
5000
10 000
15 000
20 000
25 000
30 000
1920
1965
2002
  •   Население
  •   Автомобили
  •   Средняя стоимость

Пропуск меток по оси XПравить

Если значение много, можно визуально разгрузить ось X, оставив только базовые метки. 

{{ #invoke:Chart | bar chart
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _млн
| group names = Нечто
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990

Круговые диаграммыПравить

См. также: Модуль:Диаграмма круговая
 
Круговая диаграмма

Круговая диаграмма — диаграмма, где относительная величина каждого значения изображается в виде сектора круга, площадь которого соответствует вкладу этого значения в сумму значений.
Известна также как секторная диаграмма, англ. pie chart.

ПараметрыПравить

параметр назначение
delimiter строка-разделитель нескольких значений в строке, по умолчанию двоеточие ( : ). Не следует без нужды переопределять значение по умолчанию. Однако если внутри самих значений встречается двоеточие, этот параметр окажется полезным.
radius радиус диаграммы в пикселях без "px". Соответственно, общая ширина диаграммы будет равна radius × 2.
slices группы данных для секторов ("слайсов") в круглых скобках. Данные разделяются двоеточием, сами группы пробелами. Самые крутые :-) могут называть такие группы корте́жами (англ. tuples). Формат записи:
( Value1 : Name1 : Color1 : Link1 ) ( Value2 : Name2 : Color2 : Link2 ) ...
Value задаются числами. Числа могут быть целыми, с дробной частью в десятичном формате, в экспоненциальной записи: при этом дробная часть отделяется точкой, а не запятой. Форматы 7.24e6, 7240000.00 или 7240000.00 равно приемлемы и задают то же значение 7 миллионов 240 тысяч.
Name (названия секторов) задаются строками.
Colors необязателен. Для первых 26 секторов задана последовательность цветов, при которой соседние сектора не сливаются. Для 27 сектора и далее, если такое понадобится, нужно будет вручную указать цвета. Однако можно переопределять цвета для любого сектора: одним из стандартных названий или в формате RGB, например, #C0C0C0.
Link могут быть внешними или внутренними ссылками, включая ссылки на якоря/разделы в той же статье, где помещена диаграмма. Например:[[Статья|Подсказка]] для внутренней ссылки, [[#Раздел|Подсказка]] для раздела в той же статье или [http://example.org Подсказка] для внешней ссылки.
slice n альтернативный способ задания секторов. n задаёт номер сектора, начиная с 1. Пропуск в нумерации недопустим, если задано "slice 1", "slice 2", "slice 4", "slice 5"... с пропуском slice 3, будут показаны только первые два сектора. Этот способ несовместим со "slices", оба способа одновременно использовать нельзя, это ведёт к непредсказуемым результатам. В целом это те же кортежи из раздела чуть выше, но без скобок: 
 | slice 1 = Value1 : Name1 : Color1 : Link1
 | slice 2 = Value2 : Name2 : Color2 : Link2
 | ...

Такой формат позволяет использовать скобки в названиях, ссылках и цветах.

percent если включено, будет подсчитан и показан процент каждого сегмента от общего значения. Если, например, есть два сектора с числом людей ( 1 : Подростки ) ( 3 : Пожилые ) и включён "percent", легенда к диаграмме станет "Подростки: 1 (25%)" и "Пожилые: 3 (75%)" вместо просто "Подростки: 1" and "Пожилые: 3". Любое непустое значение равно "да". Для "нет" просто не указывайте этот параметр или оставьте его значение пустым.
units prefix "префикс" значений для всплывающей подсказки, например, $, чтобы значение "500" показывалось как "$500".
units suffix "суффикс" значений для всплывающей подсказки, например, ms, чтобы значение "500" показывалось как "500ms". Знак подчёркивания заменяется пробелом: чтобы задать суффикс % через пробел, используйте _%
hide group legends если включено, легенда к диаграмме не выводится. Любое непустое значение равно "да". Для "нет" просто не указывайте этот параметр или оставьте его значение пустым.

ПримерыПравить

{{#invoke:Chart|pie chart
| radius = 150
| slices = 
    ( 1000000 : Яблоки ) 
    ( 2000000 : Бананы )
    ( 3000000 : Абрикосы )
| units suffix = _т
| percent = true
}}
Яблоки: 1 000 000 т (16.7%)Бананы: 2 000 000 т (33.3%)Абрикосы: 3 000 000 т (50.0%) 
  •   Яблоки: 1 000 000 т (16.7%)
  •   Бананы: 2 000 000 т (33.3%)
  •   Абрикосы: 3 000 000 т (50.0%)

Ширина и расположение на страницеПравить

Ширина задаётся параметром width (гистограммы) или удвоенным значением radius (круговые диаграммы). При слишком маленьких размерах возможны искажения и налезание меток друг на друга.

В текущей версии позиционирование на странице не предусмотрено, точнее, оно всегда по левому краю страницы с началом нового блока перед и после. Для размещения по правому краю можно использовать "обёртку" из элемента DIV. Например, гистограмма из примеров выше шириной 450px с выравниванием по правому краю и обтеканием текстом: 

<div style="float:right;">{{ #invoke:Chart | bar chart
| width = 450
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _млн
| group names = Нечто
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}</div>
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rutrum euismod massa pharetra consequat. Suspendisse volutpat ultrices turpis. Ut ultricies semper justo, at gravida felis. Phasellus non mi eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum sapien massa, placerat a sollicitudin sed, molestie et mauris. Pellentesque a tempus ante, ac posuere lacus. Donec pulvinar auctor urna at tristique.

Vestibulum dolor sapien, suscipit sit amet justo in, porttitor lacinia est. Maecenas commodo, turpis vel maximus vehicula, sapien urna molestie felis, at bibendum orci nibh at libero. Fusce elementum, diam sollicitudin porttitor finibus, dui nunc egestas diam, eget accumsan erat nunc quis leo. Duis sit amet sem non nisi hendrerit cursus. In hac habitasse platea dictumst. Aliquam varius convallis mi nec porttitor. Vestibulum sed consequat purus. Cras malesuada mollis mauris, non rutrum tellus rutrum ac. Curabitur sed lacinia dolor. Vivamus a dui vitae metus vestibulum lobortis. Ut condimentum vitae nunc elementum porta.

Cras accumsan dictum massa, quis semper ante dictum eu. Quisque quis finibus elit, in consectetur lorem. Aenean condimentum libero eget sapien rhoncus faucibus. Vivamus quis lorem sed ante finibus volutpat in eu dolor. Sed hendrerit lectus purus, nec scelerisque odio porttitor vel. Sed eget lectus ut nibh convallis sollicitudin non ac nibh. Donec eu ultrices justo. Phasellus id tincidunt nulla. Proin sagittis arcu sit amet nibh convallis dictum rhoncus sed nibh. Mauris maximus dolor diam, nec molestie libero sodales et.

Та же диаграмма по центру страницы в чёрной рамке с отступами 5px от самой диаграммы. Обратите внимание, что задавать ширину здесь нужно и в DIV (с "px"), и в диаграмме (без "px"): 

<div style="width:450px; margin:0 auto; padding:5px; border:1px solid black;">{{ #invoke:Chart | bar chart
|           width=450
| group 1 = 1:2:3:4:5:6:7:8:9:10:11:12:13:14:15:16:17:18:19:20:21:22:23:24:25:26:27:28:29:30
:31:32:33:34:35:36:37:38:39:40:41:42:43:44:45:46:47:48:49:50:51:52:53:54:55:56:57:58:59
| units suffix = _млн
| group names = Нечто
| x legends = ::::1940::::::::::1950::::::::::1960::::::::::1970::::::::::1980::::::::::1990::::
}}</div>
10
20
30
40
50
60
1940
1950
1960
1970
1980
1990
Источник — https://massarn.com/w/index.php?title=Модуль:Chart/doc&oldid=839