Модуль: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 = Перед : В течение : После }}
- Яблоки
- Бананы
- Апельсины
Гистограмма с накоплением
Та же гистограмма с накоплением (англ. 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, любое непустое значение --> }}
- Яблоки
- Бананы
- Апельсины
Гистограмма с накоплением и с большим количеством групп
Приводится более для демонстрации возможностей программы и показа, как такая гистограмма будет выглядеть на странице.
{{ #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 }}
- Алабама
- Аляска
- Аризона
- Арканзас
- Калифорния
- Колорадо
- Коннектикут
- Делавэр
- Флорида
- Джорджия
- Гавайи
- Айдахо
- Иллинойс
- Индиана
- Айова
- Канзас
- Кентукки
- Луизиана
- Мэн
- Мериленд
- Массачусетс
Отдельные оси 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 }}
- Население
- Автомобили
- Средняя стоимость
Пропуск меток по оси 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:::: }}
Круговые диаграммы
Круговая диаграмма — диаграмма, где относительная величина каждого значения изображается в виде сектора круга, площадь которого соответствует вкладу этого значения в сумму значений.
Известна также как секторная диаграмма, англ. 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 могут быть внешними или внутренними ссылками, включая ссылки на якоря/разделы в той же статье, где помещена диаграмма. Например:[[Статья|Подсказка]] для внутренней ссылки, [[#Раздел|Подсказка]] для раздела в той же статье или [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>
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>
Во избежание поломок страниц, использующих данный модуль, желательно экспериментировать в Песочнице для модулей.
--<source lang=lua> --[[ keywords are used for languages: they are the names of the actual parameters of the template ]] local keywords = { barChart = 'bar chart', pieChart = 'pie chart', width = 'width', height = 'height', stack = 'stack', colors = 'colors', group = 'group', xlegend = 'x legends', tooltip = 'tooltip', links = 'links', defcolor = 'default color', scalePerGroup = 'scale per group', unitsPrefix = 'units prefix', unitsSuffix = 'units suffix', groupNames = 'group names', slices = 'slices', slice = 'slice', radius = 'radius', percent = 'percent', } -- here is what you want to translate local defColors = {'red','red', 'blue','blue', 'green','green', 'yellow','yellow', 'fuchsia','fuchsia', 'aqua','aqua', 'brown','brown', 'orange','orange', 'purple','purple', 'sienna','sienna', 'amethyst','#F0A3FF', 'ebony','#191919', 'forest','#005C31', 'honeydew','#FFCC99', 'iron','#808080', 'khaki','#8F7C00', 'lime','#9DCC00', 'navy','#003380', 'pink','#FFA8BB', 'quagmire','#426600', 'sky','#5EF1F2', 'turquoise','#00998F', 'uranium','#E0FF66', 'violet','#740AFF', 'xanthin','#FFFF80', 'zinnia','#FF5005'} local function nulOrWhitespace( s ) return not s or mw.text.trim( s ) == '' end local function createGroupList( tab, legends, cols ) if #legends > 1 then table.insert( tab, mw.text.tag( 'div' ) ) local list = {} local spanStyle = "padding:0 1em;background-color:%s;box-shadow:2px -1px 4px 0 silver;margin-right:1em;" for gi = 1, #legends do local span = mw.text.tag( 'span', { style = string.format( spanStyle, cols[gi] ) }, ' ' ) .. ' '.. legends[gi] table.insert( list, mw.text.tag( 'li', {}, span ) ) end table.insert( tab, mw.text.tag( 'ul', {style="width:100%;list-style:none;-webkit-column-width:12em;-moz-column-width:12em;column-width:12em;"}, table.concat( list, '\n' ) ) ) table.insert( tab, '</div>' ) end end function pieChart( frame ) local res, imslices, args = {}, {}, frame.args local radius local values, colors, names, legends, links = {}, {}, {}, {}, {} local delimiter = args.delimiter or ':' local lang = mw.getContentLanguage() function getArg( s, def, subst, with ) local result = args[keywords[s]] or def or '' if subst and with then result = mw.ustring.gsub( result, subst, with ) end return result end function analyzeParams() function addSlice( i, slice ) local value, name, color, link = unpack( mw.text.split( slice, '%s*' .. delimiter .. '%s*' ) ) values[i] = tonumber( lang:parseFormattedNumber( value ) ) or error( string.format( 'Slice %d: "%s", first item("%s") could not be parsed as a number', i, value or '', sliceStr ) ) colors[i] = not nulOrWhitespace( color ) and color or defColors[i * 2] names[i] = name or '' links[i] = link end radius = getArg( 'radius', 150 ) local slicesStr = getArg( 'slices' ) local prefix = getArg( 'unitsPrefix', '', '_', ' ' ) local suffix = getArg( 'unitsSuffix', '', '_', ' ' ) local percent = args[keywords.percent] local sum = 0 local i, value = 0 for slice in mw.ustring.gmatch( slicesStr or '', "%b()" ) do i = i + 1 addSlice( i, mw.ustring.match( slice, '^%(%s*(.-)%s*%)$' ) ) end for k, v in pairs(args) do local ind = mw.ustring.match( k, '^' .. keywords.slice .. '%s+(%d+)$' ) if ind then addSlice( tonumber( ind ), v ) end end for _, val in ipairs( values ) do sum = sum + val end for i, value in ipairs( values ) do local addprec = percent and string.format( ' (%0.1f%%)', value / sum * 100 ) or '' legends[i] = mw.ustring.format( '%s: %s%s%s%s', names[i], prefix, lang:formatNum( value ), suffix, addprec ) links[i] = mw.text.trim( links[i] or mw.ustring.format( '[[#noSuchAnchor|%s]]', legends[i] ) ) end end function addRes( ... ) for _, v in pairs( { ... } ) do table.insert( res, v ) end end function createImageMap() addRes( '{{#tag:imagemap|', 'Image:Circle frame.svg{{!}}' .. ( radius * 2 ) .. 'px' ) addRes( unpack( imslices ) ) addRes( 'desc none', '}}' ) end function drawSlice( i, q, start ) local color = colors[i] local angle = start * 2 * math.pi local sin, cos = math.abs( math.sin( angle ) ), math.abs( math.cos( angle ) ) local wsin, wcos = sin * radius, cos * radius local s1, s2, w1, w2, w3, w4, width, border local style if q == 1 then border = 'left' w1, w2, w3, w4 = 0, 0, wsin, wcos s1, s2 = 'bottom', 'left' elseif q == 2 then border = 'bottom' w1, w2, w3, w4 = 0, wcos, wsin, 0 s1, s2 = 'bottom', 'right' elseif q == 3 then border = 'right' w1, w2, w3, w4 = wsin, wcos, 0, 0 s1, s2 = 'top', 'right' else border = 'top' w1, w2, w3, w4 = wsin, 0, 0, wcos s1, s2 = 'top', 'left' end local style = string.format( 'position:absolute;%s:%spx;%s:%spx;width:%spx;height:%spx', s1, radius, s2, radius, radius, radius ) if start <= ( q - 1 ) * 0.25 then style = string.format( '%s;border:0;background-color:%s', style, color ) else style = string.format( '%s;border-width:%spx %spx %spx %spx;border-%s-color:%s', style, w1, w2, w3, w4, border, color ) end addRes( mw.text.tag( 'div', { class = 'transborder', style = style }, '' ) ) end function createSlices() function coordsOfAngle( angle ) return ( 100 + math.floor( 100 * math.cos( angle ) ) ) .. ' ' .. ( 100 - math.floor( 100 * math.sin( angle ) ) ) end local sum, start = 0, 0 for _, value in ipairs( values ) do sum = sum + value end for i, value in ipairs(values) do local poly = { 'poly 100 100' } local startC, endC = start / sum, ( start + value ) / sum local startQ, endQ = math.floor( startC * 4 + 1 ), math.floor( endC * 4 + 1 ) for q = startQ, math.min( endQ, 4 ) do drawSlice( i, q, startC ) end for angle = startC * 2 * math.pi, endC * 2 * math.pi, 0.02 do table.insert( poly, coordsOfAngle( angle ) ) end table.insert( poly, coordsOfAngle( endC * 2 * math.pi ) .. ' 100 100 ' .. links[i] ) table.insert( imslices, table.concat( poly, ' ' ) ) start = start + values[i] end end analyzeParams() if #values == 0 then error( "no slices found - can't draw pie chart" ) end addRes( mw.text.tag( 'div', { style = string.format( "max-width:%spx", radius * 2 ) } ) ) addRes( mw.text.tag( 'div', { style = string.format( 'position:relative;min-width:%spx;min-height:%spx;max-width:%spx;overflow:hidden;', radius * 2, radius * 2, radius * 2 ) } ) ) createSlices() addRes( mw.text.tag( 'div', { style = string.format( 'position:absolute;min-width:%spx;min-height:%spx;overflow:hidden;', radius * 2, radius * 2 ) } ) ) createImageMap() addRes( '</div>' ) -- close "position:relative" div that contains slices and imagemap. addRes( '</div>' ) -- close "position:relative" div that contains slices and imagemap. createGroupList( res, legends, colors ) -- legends addRes( '</div>' ) -- close containing div return frame:preprocess( table.concat( res, '\n' ) ) end function barChart( frame ) local res = {} local args = frame.args -- can be changed to frame:getParent().args local values, xlegends, colors, tooltips, yscales = {}, {}, {}, {} ,{}, {}, {} local groupNames, unitsSuffix, unitsPrefix, links = {}, {}, {}, {} local width, height, stack, delimiter = 500, 350, false, ':' local chartWidth, chartHeight, defcolor, scalePerGroup local numGroups, numValues local scaleWidth function validate() function asGroups( name, tab, toDuplicate, emptyOK ) if #tab == 0 and not emptyOK then error( "must supply values for " .. keywords[name] ) end if #tab == 1 and toDuplicate then for i = 2, numGroups do tab[i] = tab[1] end end if #tab > 0 and #tab ~= numGroups then error ( keywords[name] .. ' should contain the same number of items as the number of groups (' .. numGroups .. ')') end end -- do all sorts of validation here, so we can assume all params are good from now on. -- among other things, replace numerical values with mw.language:parseFormattedNumber() result chartHeight = height - 30 numGroups = #values numValues = #values[1] defcolor = defcolor or 'blue' colors[1] = colors[1] or defcolor scaleWidth = scalePerGroup and 80 * numGroups or 100 chartWidth = width -scaleWidth asGroups( 'unitsPrefix', unitsPrefix, true, true ) asGroups( 'unitsSuffix', unitsSuffix, true, true ) asGroups( 'colors', colors, true, true ) asGroups( 'groupNames', groupNames, false, false ) if stack and scalePerGroup then error( string.format( 'Illegal settings: %s and %s are incompatible.', keyword.stack, keyword.scalePerGroup ) ) end for gi = 2, numGroups do if #values[gi] ~= numValues then error( keywords.group .. " " .. gi .. " does not have same number of values as " .. keywords.group .. " 1" ) end end if #xlegends ~= numValues then error( 'Illegal number of ' .. keywords.xlegend .. '. Should be exatly ' .. numValues ) end end function extractParams() function testone( keyword, key, val, tab ) i = keyword == key and 0 or key:match( keyword .. "%s+(%d+)" ) if not i then return end i = tonumber( i ) or error("Expect numerical index for key " .. keyword .. " instead of '" .. key .. "'") if i > 0 then tab[i] = {} end for s in mw.text.gsplit( val, '%s*' .. delimiter .. '%s*' ) do table.insert( i == 0 and tab or tab[i], s ) end return true end for k, v in pairs( args ) do if k == keywords.width then width = tonumber( v ) if not width or width < 200 then error( 'Illegal width value (must be a number, and at least 200): ' .. v ) end elseif k == keywords.height then height = tonumber( v ) if not height or height < 200 then error( 'Illegal height value (must be a number, and at least 200): ' .. v ) end elseif k == keywords.stack then stack = true elseif k == keywords.scalePerGroup then scalePerGroup = true elseif k == keywords.defcolor then defcolor = v else for keyword, tab in pairs( { group = values, xlegend = xlegends, colors = colors, tooltip = tooltips, unitsPrefix = unitsPrefix, unitsSuffix = unitsSuffix, groupNames = groupNames, links = links, } ) do if testone( keywords[keyword], k, v, tab ) then break end end end end end function roundup( x ) -- returns the next round number: eg., for 30 to 39.999 will return 40, for 3000 to 3999.99 wil return 4000. for 10 - 14.999 will return 15. local ordermag = 10 ^ math.floor( math.log10( x ) ) local normalized = x / ordermag local top = normalized >= 1.5 and ( math.floor( normalized + 1 ) ) or 1.5 return ordermag * top, top, ordermag end function calcHeightLimits() -- if limits were passed by user, use ithem, otherwise calculate. for "stack" there's only one limet. if stack then local sums = {} for _, group in pairs( values ) do for i, val in ipairs( group ) do sums[i] = ( sums[i] or 0 ) + val end end local sum = math.max( unpack( sums ) ) for i = 1, #values do yscales[i] = sum end else for i, group in ipairs( values ) do yscales[i] = math.max( unpack( group ) ) end end for i, scale in ipairs( yscales ) do yscales[i] = roundup( scale ) end if not scalePerGroup then for i = 1, #values do yscales[i] = math.max( unpack( yscales ) ) end end end function tooltip( gi, i, val ) if tooltips and tooltips[gi] and not nulOrWhitespace( tooltips[gi][i] ) then return tooltips[gi][i], true end local groupName = not nulOrWhitespace( groupNames[gi] ) and groupNames[gi] .. ': ' or '' local prefix = unitsPrefix[gi] or unitsPrefix[1] or '' local suffix = unitsSuffix[gi] or unitsSuffix[1] or '' return mw.ustring.gsub(groupName .. prefix .. mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) .. suffix, '_', ' '), false end function calcHeights( gi, i, val ) local barHeight = math.floor( val / yscales[gi] * chartHeight + 0.5 ) -- add half to make it "round" insstead of "trunc" local top, base = chartHeight - barHeight, 0 if stack then local rawbase = 0 for j = 1, gi - 1 do rawbase = rawbase + values[j][i] end -- sum the "i" value of all the groups below our group, gi. base = math.floor( chartHeight * rawbase / yscales[gi] ) -- normally, and especially if it's "stack", all the yscales must be equal. end return barHeight, top - base end function groupBounds( i ) local setWidth = math.floor( chartWidth / numValues ) local setOffset = ( i - 1 ) * setWidth return setOffset, setWidth end function calcx( gi, i ) local setOffset, setWidth = groupBounds( i ) if stack then local barWidth = math.min( 38, math.floor( 0.8 * setWidth ) ) return setOffset + (setWidth - barWidth) / 2, barWidth end setWidth = 0.85 * setWidth local barWidth = math.floor( 0.75 * setWidth / numGroups ) local left = setOffset + math.floor( ( gi - 1 ) / numGroups * setWidth ) return left, barWidth end function drawbar( gi, i, val ) local color, tooltip, custom = colors[gi] or defcolor or 'blue', tooltip( gi, i, val ) local left, barWidth = calcx( gi, i ) local barHeight, top = calcHeights( gi, i, val ) local style = string.format("position:absolute;left:%spx;top:%spx;height:%spx;min-width:%spx;max-width:%spx;background-color:%s;box-shadow:2px -1px 4px 0 silver;overflow:hidden;", left, top, barHeight, barWidth, barWidth, color) local link = links[gi] and links[gi][i] or '' local img = not nulOrWhitespace( link ) and mw.ustring.format( '[[File:Transparent.png|1000px|link=%s|%s]]', link, custom and tooltip or '' ) or '' table.insert( res, mw.text.tag( 'div', { style = style, title = tooltip, }, img ) ) end function drawYScale() function drawSingle( gi, color, width, single ) local yscale = yscales[gi] local _, top, ordermag = roundup( yscale * 0.999 ) local numnotches = top <= 1.5 and top * 4 or top < 4 and top * 2 or top local valStyleStr = single and 'position:absolute;height=20px;text-align:right;vertical-align:middle;width:%spx;top:%spx;padding:0 2px' or 'position:absolute;height=20px;text-align:right;vertical-align:middle;width:%spx;top:%spx;left:3px;background-color:%s;color:white;font-weight:bold;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000;padding:0 2px' local notchStyleStr = 'position:absolute;height=1px;min-width:5px;top:%spx;left:%spx;border:1px solid %s;' for i = 1, numnotches do local val = i / numnotches * yscale local y = chartHeight - calcHeights( gi, 1, val ) local div = mw.text.tag( 'div', { style = string.format( valStyleStr, width - 10, y - 10, color ) }, mw.getContentLanguage():formatNum( tonumber( val ) or 0 ) ) table.insert( res, div ) div = mw.text.tag( 'div', { style = string.format( notchStyleStr, y, width - 4, color ) }, '' ) table.insert( res, div ) end end if scalePerGroup then local colWidth = 80 local colStyle = "position:absolute;height:%spx;min-width:%spx;left:%spx;border-right:1px solid %s;color:%s" for gi = 1, numGroups do local left = ( gi - 1 ) * colWidth local color = colors[gi] or defcolor table.insert( res, mw.text.tag( 'div', { style = string.format( colStyle, chartHeight, colWidth, left, color, color ) } ) ) drawSingle( gi, color, colWidth ) table.insert( res, '</div>' ) end else drawSingle( 1, 'black', scaleWidth, true ) end end function drawXlegends() local setOffset, setWidth local legendDivStyleFormat = "position:absolute;left:%spx;top:10px;min-width:%spx;max-width:%spx;text-align:center;veritical-align:top;" local tickDivstyleFormat = "position:absolute;left:%spx;height:10px;width:1px;border-left:1px solid black;" for i = 1, numValues do if not nulOrWhitespace( xlegends[i] ) then setOffset, setWidth = groupBounds( i ) -- setWidth = 0.85 * setWidth table.insert( res, mw.text.tag( 'div', { style = string.format( legendDivStyleFormat, setOffset - 5, setWidth - 10, setWidth - 10 ) }, xlegends[i] or '' ) ) table.insert( res, mw.text.tag( 'div', { style = string.format( tickDivstyleFormat, setOffset + setWidth / 2 ) }, '' ) ) end end end function drawChart() table.insert( res, mw.text.tag( 'div', { style = string.format( 'max-width:%spx;', width ) } ) ) table.insert( res, mw.text.tag( 'div', { style = string.format("position:relative;padding-top:10px;min-height:%spx;min-width:%spx;max-width:%spx;", height, width, width ) } ) ) table.insert( res, mw.text.tag( 'div', { style = string.format("float:right;position:relative;min-height:%spx;min-width:%spx;max-width:%spx;border-left:1px black solid;border-bottom:1px black solid;", chartHeight, chartWidth, chartWidth ) } ) ) for gi, group in pairs( values ) do for i, val in ipairs( group ) do drawbar( gi, i, val ) end end table.insert( res, '</div>' ) table.insert( res, mw.text.tag( 'div', { style = string.format("position:absolute;height:%spx;min-width:%spx;max-width:%spx;", chartHeight, scaleWidth, scaleWidth, scaleWidth ) } ) ) drawYScale() table.insert( res, '</div>' ) table.insert( res, mw.text.tag( 'div', { style = string.format( "position:absolute;top:%spx;left:%spx;width:%spx;", chartHeight, scaleWidth, chartWidth ) } ) ) drawXlegends() table.insert( res, '</div>' ) table.insert( res, '</div>' ) createGroupList( res, groupNames, colors ) table.insert( res, '</div>' ) end extractParams() validate() calcHeightLimits() drawChart() return table.concat( res, "\n" ) end return { ['bar-chart'] = barChart, [keywords.barChart] = barChart, [keywords.pieChart] = pieChart, } --</source>