Шаблон:Секторна діаграма

Документація шаблону[перегляд] [редагувати] [історія] [очистити кеш]

Використання

Шаблоном передбачено до 20 включно параметрів мітка та значення. Усі параметри для трьох секторів описані нижче; для того щоб використати більше ніж 3 сектори просто скопіюйте частин коду замінивши нумерацію.

{{Секторна діаграма
|thumb     = 
|заголовок = 
|інше      = 
|мітка1    = 
|значення1 = 
|колір1    = 
|мітка2    = 
|значення2 = 
|колір2    = 
|мітка3    = 
|значення3 = 
|колір3    = 
}}

• thumb визначає з якого боку сторіки буде розташована діаграма, за замовчування right. Для того зоб вказати діаграмі знаходитись ліворуч вкажіть значення left.
• заголовок — це рядок тексту, що з'являється над легендою.
• інше, якщо вказано, буде додавати пункт «інше» до легенди.
• міткаN — рядок тексту, що буде підписувати у легенді колір сектору. Якщо параметр опустити, то цей сектор не буде представлений у легенді.
• значенняN — вісткове значення для сектору. НЕ прописуйте символ відсоток (%). Також це значеня буде вказано у легенді (одразу після значення параметру мітка), без жодного округлення, або іншого форматування.
• колірN — код кольору у CSS. Якщо опущено то будуть викоритовуватись кольори за замовчуванням:

• 1.    red
  2.    green
  3.    blue
  4.    yellow
  5.    fuchsia
  6.    aqua
  7.    brown
  8.    orange
  9.    purple
  10.    sienna
  11.    silver
  12.    black
  13.    салатовий (#0f0)
  14.    navy
  15.    pink
  16.    темночервоний (#b00)
  17.    різновид оранжевого (#e72)
  18.    DarkOliveGreen2 (#bcee68)
  19.    SlateBlue2 (#7a67ee)
  20.    Coral2 (#ee6a50)

Обмеження

• Шаблон не діє коректно на мобільних пристороях. Див цю сторінку у мобільній версії сайту та повідомлення корисувача щодо цього.
• Існують незначні проблеми з друком. Також нам потрібно реалізувати гарний резервний шаблон для Книг.
• значення повинні бути у відсотках.
• Google Chrome та Safari не зглажують рамки, тому лінії у них трохи нерівні.
• Не можна поставити мітки безпосередньо на секторах.
• По суті, не можливо зберегти копію діаграми використовуючи функцію зберегти зображення у браузері.

Як це працює

   Один (5%)

   Два (5%)

   Три (5%)

   Чотири (5%)

   П'ять (5%)

   Шість (5%)

   Сім (5%)

   Вісім (5%)

   Дев'ять (5%)

   Десять (5%)

   Одинадцять (5%)

   Дванадцять (5%)

   Тринадцять (5%)

   Чотирнадцять (5%)

   П'ятнадцять (5%)

   Шістнадцять (5%)

   Сімнадцять (5%)

   Вісімнадцять (5%)

   Дев'ятнадцять (2.5%)

   Двадцять (2.5%)

   Інше (7.5%)

Релігія в Чехії станом на 2001 рік.

   Атеїсти і агностицизти (59%)

   Католики (26.8%)

   Протестанти (2.5%)

   Інше (11.7%)

Цей експериментальний шаблон відмальовує Секторні діаграми використовуючи одне зображення, багато (inline) CSS коду, що генерується функціями парсера, і жодного JavaScript 'у. Шаблон використовує техніку малювання діагональних ліній в CSS використовуючи той факто, що рамки (borders set) елементів miter joined. Таким чином, можливо встановити одну рамку непрозорого кольору, тоді як іншу іншеs повністю прозорого, для створення діагональної лінії. Те під яким кутом розташована лінія можна контролювати шляхом підлашування ширини двох рамок (одна з яких непрозора) відносно іншої.

Відзначимо, що в спадок браузер Internet Explorer 6, застосування прозорих кордонів стандартним способом не працює. Обхідний шлях використовується у формі CSS класу «transborder», який додається до MediaWiki:Common.css щоб зробити цей шаблон робочим.

Pie slices are drawn in clockwise order in a counterclockwise direction. Ці сектори розташовані:

• Під 200x200px зображення, що має прозоре коло в центрі і світлий фон (такий самий як корір фону, що використовується для CSS класу «thumbinner»)
• Всередині елемента-контейнера прописано overflow: hidden;

Це дозволяє тіьки тій частині сектору, що всередині кола бути видимій на сторінці.

Більша частина коду {{Секторна діаграма/сектор}} розділена на 5 частин, перші чотири відповідають за квадранти кола і остання повністю покриває випадок коли один сектор займає 100 % діаграми.

Див. також

• {{Brick chart}}
• {{Infobox political party/seats}}