Модуль:Песочница/Nikolai/test

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
Документация
[просмотр | править | история | обновить]
Это подстраница личной песочницы участника Nikolai

Данный модуль предназначен для создания круговых диаграмм.

Для вызова модуля используется шаблон со следующими параметрами: 

{{#invoke:Песочница/Nikolai/test|start
| диаметр | вид | расположение | описаниe | проценты | округление
| заголовок
| значение1 | описание1 | цвет1
| значение2 | описание2 | цвет2
| значение3 | описание3 | цвет3
}}

где

  • диаметр — диаметр диаграммы, возможны следующие значения: 200, 220, 240 ... до 400 с шагом 20. По умолчанию 200.
  • вид — вид диаграммы, возможны следующие значения: круг и кольцо. По умолчанию круг.
  • расположение — расположение диаграммы, возможны следующие значения: слева и справа. По умолчанию справа.
  • описание — вывод и расположение описания, возможны следующие значения: нет, внизу и справа. По умолчанию внизу.
  • проценты — вывод процентов, возможны следующие значения: да и нет. Проценты выводятся в начале строки описания. По умолчанию нет.
  • округление — округление процентов, возможны следующие значения: 0, 1 и 2. По умолчанию 0.

                0 — проценты огругляются до целых
                1 — проценты огругляются до одного знака после запятой
                2 — проценты огругляются до двух знаков после запятой

  • заголовок — заголовок диаграммы.
  • значение1 — значение для первого сектора, абсолютная или относительная величина. При нецелых числах вместо запятой используйте точку.
  • описание1 — описание первого сектора
  • цвет1 — цвет первого сектора. Цвет может быть указан в виде ключевых слов, используемых в HTML (пример: red, blue, black), шестнадцетиричным кодом (пример: #FF0000 или сокращённо #F00) или десятичным кодом (пример: rgb(255,0,0) ). По умолчанию используется внутренняя таблица цветов. Подробне смотри цвета HTML
  • максимальное колличество секторов — 20.

Примеры[править код]

{{#invoke:Песочница/Nikolai/test|start
|  |  |  |  |  |
| Диаграмма по умолчанию
| 1| |
| 1| |
| 1| |
| 1| |
| 1| |
| 1| |
| 1| |
| 1| |
| 1| |
| 1| |
}}

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><radialGradient id="RG1" gradientUnits="userSpaceOnUse" cy="10" cx="10" r="9"><stop stop-color="#FFF100" offset=".5"/><stop stop-color="#FFBF00" offset="1"/></radialGradient><circle cx="10" cy="10" r="10" fill="#E0A31A"/><circle cx="10" cy="10" r="9" fill="url(#RG1)"/></svg> 

{{#invoke:Песочница/Nikolai/test|start
|240| круг | слева | внизу | нет | 0
| Круговая диаграмма
| 1 | сектор 1   |
| 1 | сектор 2   |
| 1 | сектор 3  <br />|
| 1 | сектор 4   |
| 1 | сектор 5   |
| 1 | сектор 6 |
}}

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><radialGradient id="RG1" gradientUnits="userSpaceOnUse" cy="10" cx="10" r="9"><stop stop-color="#FFF100" offset=".5"/><stop stop-color="#FFBF00" offset="1"/></radialGradient><circle cx="10" cy="10" r="10" fill="#E0A31A"/><circle cx="10" cy="10" r="9" fill="url(#RG1)"/></svg> 

{{#invoke:Песочница/Nikolai/test|start
|200| круг | слева | справа | да | 1
| Круговая диаграмма [[Диаграмма|ссылка]]
| 10| сектор 1 <br /> |
| 20| сектор 2 <br /> |
| 30| сектор 3 <br /> | gold
| 20| сектор 4 <br /> | tomato
| 10| сектор 5 <br /> | #FF00FF
| 20| сектор 6 <br /> | rgb(32,178,170)
| 10| сектор 7 <br /> | #00FF00
| 20| сектор 8 <br /> | silver
| 10| сектор 9 <br /> | black

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><radialGradient id="RG1" gradientUnits="userSpaceOnUse" cy="10" cx="10" r="9"><stop stop-color="#FFF100" offset=".5"/><stop stop-color="#FFBF00" offset="1"/></radialGradient><circle cx="10" cy="10" r="10" fill="#E0A31A"/><circle cx="10" cy="10" r="9" fill="url(#RG1)"/></svg> 

{{#invoke:Песочница/Nikolai/test|start
|200| кольцо | слева | справа | да | 2
| Круговая диаграмма кольцо
<ref>[http://www.wikipedia.org ''Ссылка'']</ref>
| 10| сектор 1 <br /> |
| 20| сектор 2 <br /> |
| 30| сектор 3 <br /> |
| 20| сектор 4 <br /> |
| 10| сектор 5 <br /> |
| 20| сектор 6 <br /> |
| 10| сектор 7 <br /> |
| 20| сектор 8 <br /> |
| 10| сектор 9 <br /> |
}}

<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" height="20" width="20"><radialGradient id="RG1" gradientUnits="userSpaceOnUse" cy="10" cx="10" r="9"><stop stop-color="#FFF100" offset=".5"/><stop stop-color="#FFBF00" offset="1"/></radialGradient><circle cx="10" cy="10" r="10" fill="#E0A31A"/><circle cx="10" cy="10" r="9" fill="url(#RG1)"/></svg>

Примечания[править код]

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

local p = {}

function round(x, precision)
	x = math.floor(x * math.pow(10, precision) + 0.5) / math.pow(10, precision)
	if precision == 0 then
		return x
	end
	x = mw.ustring.gsub(x, "%.", ",")
	if precision == 1 and string.find(x, ",") == nil then
		x = x..",0"
	end
	return x
end

function createSlice(sbeg, send, color, radius)
	str = ''
	rad = sbeg * math.pi / 50; -- convert % in radian
	
	local x = 0;	x = math.cos(rad)
	local y = 0;	y = math.sin(rad)
	
	if x >= 0 then x = math.floor(x * 10 + 0.5) / 10
	else           x = math.floor(math.abs(x) * 10 + 0.5) / (-10)
	end

	if y >= 0 then y = math.floor(y * 10 + 0.5) / 10
	else           y = math.floor(math.abs(y) * 10 + 0.5) / (-10)
	end	

	if sbeg <= 12 then
		border = radius * math.tan(rad) --border-left
		str =      [[<div style="position:absolute; right: ]]..x..[[px; top:]]..(-1-y)..[[px; width:]]..(radius-border)..[[px;height:1px;background-color:transparent; border-style:solid; border-width:0px 0px ]]..(2*radius)..[[px ]]..(2*border)..[[px; border-color:transparent transparent ]]..'#FFF'..[[ transparent;"></div>]]
		str = str..[[<div style="position:absolute; right:-]]..x..[[px; top:]]..(-1+y)..[[px; width:]]..(radius-border)..[[px;height:1px;background-color:transparent; border-style:solid; border-width:0px 0px ]]..(2*radius)..[[px ]]..(2*border)..[[px; border-color:transparent transparent ]]..color..[[ transparent;"></div>]]
		if send > 50 then
			str = str..[[<div style="position:absolute; left:0; top:0; width:]]..radius..[[px; height:]]..(2*radius)..[[px; background-color:]]..color..[["></div>]]
		end
	elseif sbeg <= 25 then
		border = radius * math.tan(math.pi/2 - rad) --border-top
		str =      [[<div style="position:absolute; left:-]]..x..[[px; bottom: ]]..y..[[px; width:]]..radius..[[px;height:]]..radius..[[px;background-color:transparent; border-style:solid; border-width:]]..border..'px '..radius..[[px 0px 0px; border-color:transparent ]]..'#FFF'..[[ transparent transparent;"></div>]]
		str = str..[[<div style="position:absolute; left: ]]..x..[[px; bottom:-]]..y..[[px; width:]]..radius..[[px;height:]]..radius..[[px;background-color:transparent; border-style:solid; border-width:]]..border..'px '..radius..[[px 0px 0px; border-color:transparent ]]..color..[[ transparent transparent;"></div>]]
		if send > 50 then
			str = str..[[<div style="position:absolute; left:0; top:0; width:]]..radius..[[px; height:]]..(2*radius)..[[px; background-color:]]..color..[["></div>]]
		end
	elseif sbeg <= 37 then
		border = radius * math.tan(rad - math.pi/2)
		str =      [[<div style="position:absolute; left:]]..(-1*x)..[[px; bottom: ]]..y..[[px; width:1px; height:]]..(radius-border)..[[px; background-color:transparent; border-style:solid; border-width:]]..(2*border)..[[px 0px 0px ]]..(2*radius)..[[px; border-color:transparent transparent transparent ]]..'#FFF'..[[;"></div>]]
		str = str..[[<div style="position:absolute; left:     ]]..x..[[px; bottom:-]]..y..[[px; width:1px; height:]]..(radius-border)..[[px; background-color:transparent; border-style:solid; border-width:]]..(2*border)..[[px 0px 0px ]]..(2*radius)..[[px; border-color:transparent transparent transparent ]]..color..[[;"></div>]]
		if send > 75 then
			str = str..[[<div style="position:absolute; left:0; top:0; width:]]..radius..[[px; height:]]..radius..[[px; background-color:]]..color..[["></div>]]
		end
	elseif sbeg <= 50 then
		border = radius * math.tan(math.pi - rad) --border-right
		str =      [[<div style="position:absolute; left:]]..(-1*x)..[[px; top:-]]..y..[[px; width:]]..radius..[[px; height:]]..radius..[[px; background-color:transparent; border-style:solid; border-width:0px ]]..border..'px '..radius..[[px 0px; border-color:transparent transparent ]]..'#FFF'..[[ transparent;"></div>]]
		str = str..[[<div style="position:absolute; left:     ]]..x..[[px; top: ]]..y..[[px; width:]]..radius..[[px; height:]]..radius..[[px; background-color:transparent; border-style:solid; border-width:0px ]]..border..'px '..radius..[[px 0px; border-color:transparent transparent ]]..color..[[ transparent;"></div>]]
		if send > 75 then
			str = str..[[<div style="position:absolute; left:0; top:0; width:]]..radius..[[px; height:]]..radius..[[px; background-color:]]..color..[["></div>]]
		end
	elseif sbeg <= 62 then
		border = radius * math.tan(rad - math.pi) --border-right
		str =      [[<div style="position:absolute; left:]]..(-1*x)..[[px; bottom:]]..(-1+y)..[[px; width:]]..(radius-border)..[[px; height:1px; background-color:transparent; border-style:solid; border-width:]]..radius..[[px ]]..border..[[px 0px 0px; border-color:]]..'#FFF'..[[ transparent transparent transparent;"></div>]]
		str = str..[[<div style="position:absolute; left:     ]]..x..[[px; bottom:]]..(-1-y)..[[px; width:]]..(radius-border)..[[px; height:1px; background-color:transparent; border-style:solid; border-width:]]..radius..[[px ]]..border..[[px 0px 0px; border-color:]]..color..[[ transparent transparent transparent;"></div>]]
		if send > 75 then
			str = str..[[<div style="position:absolute; left:0; top:0; width:]]..radius..[[px; height:]]..radius..[[px; background-color:]]..color..[["></div>]]
		end
	elseif sbeg <= 75 then
		border = radius * math.tan(math.pi*1.5 - rad) --border-bottom
		str =      [[<div style="position:absolute; right:]]..x..[[px; top:]]..(-1*y)..[[px; width:]]..radius..[[px; height:]]..radius..[[px; background-color:transparent; border-style:solid; border-width:0px 0px ]]..border..[[px ]]..radius..[[px; border-color:transparent transparent transparent ]]..'#FFF'..[["></div>]]	
		str = str..[[<div style="position:absolute; right:]]..(-1*x)..[[px; top:]]..y..[[px; width:]]..radius..[[px; height:]]..radius..[[px; background-color:transparent; border-style:solid; border-width:0px 0px ]]..border..[[px ]]..radius..[[px; border-color:transparent transparent transparent ]]..color..[["></div>]]	
	elseif sbeg <= 87 then
		border = radius * math.tan(rad - math.pi*1.5) --
		str =      [[<div style="position:absolute; left:]]..(-1-x)..[[px; top:]]..(-1*y)..[[px;  width:1px; height:]]..(radius-border)..[[px; background-color:transparent; border-style:solid; border-width:0px ]]..radius..[[px ]]..border..[[px 0px; border-color:transparent ]]..'#FFF'..[[ transparent transparent;"></div>]]
		str = str..[[<div style="position:absolute; left:]]..(-1+x)..[[px; top:]]..y..[[px;       width:1px; height:]]..(radius-border)..[[px; background-color:transparent; border-style:solid; border-width:0px ]]..radius..[[px ]]..border..[[px 0px; border-color:transparent ]]..color..[[ transparent transparent;"></div>]]
	else
		border = radius * math.tan(math.pi*2 - rad)
		str =      [[<div style="position:absolute; left:-]]..x..[[px; top:]]..(-1+(-1*y))..[[px; width:]]..(radius-border)..[[px; height:1px; background-color:transparent; border-style:solid; border-width:0px ]]..(border)..[[px ]]..radius..[[px 0px; border-color:transparent ]]..'#FFF'..[[ transparent transparent;"></div>]]
		str = str..[[<div style="position:absolute; left: ]]..x..[[px; top:]]..(-1+y)..[[px;      width:]]..(radius-border)..[[px; height:1px; background-color:transparent; border-style:solid; border-width:0px ]]..(border)..[[px ]]..radius..[[px 0px; border-color:transparent ]]..color..[[ transparent transparent;"></div>]]
	end
	return str
end

function p.start(frame)

	local html = ''
   html = [[<?xml version="1.0" encoding="UTF-8"?>]]..
   [[<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">]]..
	[[<radialGradient id="RG1" gradientUnits="userSpaceOnUse" cy="10" cx="10" r="9">]]..
		[[<stop stop-color="#FFF100" offset=".5"/>]]..
		[[<stop stop-color="#FFBF00" offset="1"/>]]..
	[[</radialGradient>]]..
	[[<circle cx="10" cy="10" r="10" fill="#E0A31A"/>]]..
	[[<circle cx="10" cy="10" r="9" fill="url(#RG1)"/>]]..
--<g stroke="#B3801E" fill="#fff" stroke-width=".8">
--	<ellipse cx="6" cy="7.4" rx="2" ry="3.5"/>
--	<ellipse cx="14" cy="7.4" rx="2" ry="3.5"/>
--</g>
--<g fill="#730000">
--	<ellipse cx="6" cy="8.8" rx="1.26" ry="1.6"/>
--	<ellipse cx="14" cy="8.8" rx="1.26" ry="1.6"/>
--</g>
--<path d="M 5.2,13.6 A 5.4 5.4 0 0 0 14.6,13.6" fill="none" stroke="#C73D00" stroke-width="1.2" stroke-linecap="round"/>
   [[</svg>]]

	return html
end

return p
Источник — https://ru.wikipedia.org/w/index.php?title=Модуль:Песочница/Nikolai/test&oldid=71929053