Модул:Chart/doc

This is the documentation page for Модул:Chart

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

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

Гистограммы

Шаблон:См. также мини|справа|Гистограмма Гистогра́мма (от юн.-қад. ἱστός— столб + γράμμα — черта, буква, написание) — способ графического представления табличных данных, где количественные соотношения представлены в виде прямоугольников.
Известна также как линейчатая диаграмма (в документации 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

5 000

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` (названия секторов) задаются строками. `Color`s необязателен. Для первых 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%)

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

Ширина задаётся параметром 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