الگو:نمودار گرد/توضیحات

کاربرد

ویرایش

The labels and values of up to 30 slices may be specified. All the parameters for six slices are included below; to include more slices, copy the code for one of the others, changing the digit at the end of each parameter name.

{{نمودار گرد
| thumb = 
| caption = 
| other = 
| label1 =remember 
| value1 =16.6
| color1 =2
| label2 =understand
| value2 =16.6
| color2 =3 
| label3 =apply
| value3 =16.6 
| color3 =5 
| label4 =analyze
| value4 =16.6
| color4 =6
| label5 =evaluate
| value5 =16.6
| color5 =9
| label6 =design
| value6 =16.6
| color6 =10
}}
  • The parameter |thumb= specifies which side of the page the chart is floated to and defaults to right, as with image files. To make the chart appear on the left side of the page, specify |thumb=left.
  • The parameter |caption= specifies a string of text that appears on a line just before the legend.
  • The parameter |other=, if specified, will cause an "Other" item to appear in the legend.
  • Each |labelN= is a string of text that appears in the legend entry for a slice. Omitting it will cause a legend entry to not be shown for that slice.
  • Each |valueN= is the percentage that the slice represents. Do not include the percent sign. Also note that it is shown in the legend as written (just after the label), without any rounding or other reformatting.
  • Each |colorN= is a رنگ‌های وب. If omitted, it will default to the following hues:
  1.   red
  2.   green
  3.   blue
  4.   yellow
  5.   fuchsia
  6.   aqua
  7.   brown
  8.   orange
  9.   purple
  10.   sienna

محدودیت‌ها

ویرایش
  • Minor issues with printing exist. We also need to implement a good fallback for use with the ویکی‌پدیا:کتاب‌ها.
  • The values need to be percentages.
  • Google Chrome and Safari do not appear to ضد پلگی borders, so the lines are a bit jagged. (For Chrome, this issue seems to be resolved; tested with version 26.)
  • No labels can be put on the slices themselves.
  • Inherently, it is not possible to save a copy of the chart using the browser's "Save Image" function.
  • Max. number of slices that can be displayed: 30

چگونگی کارکرد

ویرایش
  One (42٪)
  Two (32٪)
  Three (12٪)
  Four (3٪)
  Five (2٪)
  Six (1٪)
  دیگر (۸٪)

This is an experimental template that draws pie charts using a single image, a lot of (inline) CSS code generated by parser functions, and absolutely no JavaScript. It uses a technique for drawing diagonal lines in CSS exploiting the fact that borders set on elements are اتصال فارسیed. Thus, it is possible to set one border to an opaque color, with the others fully transparent, to form a diagonal line. The angle of the line can be controlled by adjusting the widths of two adjacent borders (one of them opaque) relative to each other.

Pie slices are drawn in clockwise order in a counterclockwise direction. These pie slices are positioned:

  • Below a 200×200px image having a transparent circle on a light-colored background (same as the background color used for CSS class thumbinner)
  • Inside a container element with overflow: hidden; set

This allows only the part of each slice that is inside the circle to be visible on the page.

Most of the code in {{Pie chart/slice}} is divided into five sections, the first four corresponding to quadrants of the circle and the last to cleanly cover the case in which one slice occupies 100% of the chart.

نمونه

ویرایش

The following example of الگو:نمودار گرد generates the pie chart shown at right.

 {{نمودار گرد
 | caption=[[Religion in the Czech Republic]] as of 2001.
 | other = yes
 | label1 = [[خداناباوری]]s and [[ندانم‌گرایی]]
 | value1 = 59 | color1 = silver
 | label2 = [[کلیسای کاتولیک]]
 | value2 = 26.8 | color2 = #008
 | label3 = [[پروتستانتیسم]]
 | value3 = 2.5 | color3 = #08f
 }}
Formatted/colorized template source for Template:Pie chart
{{زیرصفحه توضیحات}} <!-- خواهشمند است رده‌ها را جایی که در پایین این صفحه اشاره شده‌است قرار دهید و میان‌ویکی‌ها را هم در ویکی‌داده ([[ویکی‌پدیا:ویکی‌داده]] را ببینید) --> {{میانبر الگو|Pie chart
    |Pie graph}} {{آغاز چپ‌چین}} === کاربرد === The labels and values of up to 30 slices may be specified. All the parameters for six slices are included below; to include more slices, copy the code for one of the others, changing the digit at the end of each parameter name. <pre><nowiki> {{نمودار گرد | thumb = | caption = | other = | label1 =remember | value1 =16.6 | color1 =2 | label2 =understand | value2 =16.6 | color2 =3 | label3 =apply | value3 =16.6 | color3 =5 | label4 =analyze | value4 =16.6 | color4 =6 | label5 =evaluate | value5 =16.6 | color5 =9 | label6 =design | value6 =16.6 | color6 =10 }} </nowiki>
  • The parameter </nowiki>{{پارا|thumb}} specifies which side of the page the chart is floated to and defaults to <code>right</code>, as with image files. To make the chart appear on the ''left'' side of the page, specify {{پارا|thumb
        |left}}. * The parameter {{پارا|caption}} specifies a string of text that appears on a line just before the legend. * The parameter {{پارا|other}}, if specified, will cause an "Other" item to appear in the legend. * Each {{پارا|label''N''}} is a string of text that appears in the legend entry for a slice. Omitting it will cause a legend entry to not be shown for that slice. * Each {{پارا|value''N''}} is the percentage that the slice represents. Do ''not'' include the percent sign. Also note that it is shown in the legend as written (just after the label), without any rounding or other reformatting. * Each {{پارا|color''N''}} is a [[رنگ‌های وب]]. If omitted, it will default to the following hues: {{فهرست چندستونی|colwidth=10em
        | # {{زیرنویس نقشه|red
            |red}} # {{زیرنویس نقشه|green
            |green}} # {{زیرنویس نقشه|blue
            |blue}} # {{زیرنویس نقشه|yellow
            |yellow}} # {{زیرنویس نقشه|fuchsia
            |fuchsia}} # {{زیرنویس نقشه|aqua
            |aqua}} # {{زیرنویس نقشه|brown
            |brown}} # {{زیرنویس نقشه|orange
            |orange}} # {{زیرنویس نقشه|purple
            |purple}} # {{زیرنویس نقشه|sienna
            |sienna}} }} === محدودیت‌ها === * Minor issues with printing exist. We also need to implement a good fallback for use with the [[ویکی‌پدیا:کتاب‌ها]]. * The values need to be percentages. * Google Chrome and Safari do not appear to [[ضد پلگی]] borders, so the lines are a bit jagged. (For Chrome, this issue seems to be resolved; tested with version 26.) * No labels can be put on the slices themselves. * Inherently, it is not possible to save a copy of the chart using the browser's "Save Image" function. * Max. number of slices that can be displayed: '''30''' === چگونگی کارکرد === {{نمودار گرد

|other = yes
    |value1 = 42
    |label1 = One
    |value2 = 32
    |label2 = Two
    |value3 = 12
    |label3 = Three
    |value4 = 3
    |label4 = Four
    |value5 = 2
    |label5 = Five
    |value6 = 1
    |label6 = Six }} This is an ''experimental'' template that draws pie charts using a single image, a lot of (inline) CSS code generated by parser functions, and ''absolutely no JavaScript''. It uses a technique for [http://erezsh.wordpress.com/2008/07/31/drawing-diagonal-lines-with-css/ drawing diagonal lines in CSS] exploiting the fact that borders set on elements are [[اتصال فارسی]]ed. Thus, it is possible to set one border to an opaque color, with the others fully transparent, to form a diagonal line. The angle of the line can be controlled by adjusting the widths of two adjacent borders (one of them opaque) relative to each other. Pie slices are drawn in clockwise order in a counterclockwise direction. These pie slices are positioned: * Below a [[:File:Circle frame.svg|200×200px image]] having a transparent circle on a light-colored background (same as the background color used for CSS class <code>thumbinner</code>) * Inside a container element with <code>overflow: hidden;</code> set This allows only the part of each slice that is inside the circle to be visible on the page. Most of the code in {{الگوب|Pie chart/slice}} is divided into five sections, the first four corresponding to quadrants of the circle and the last to cleanly cover the case in which one slice occupies 100% of the chart. {{پاک‌کن}} === نمونه === {{نمودار گرد | caption=[[Religion in the Czech Republic]] as of 2001.
    | other = yes
    | label1 = [[خداناباوری]]s and [[ندانم‌گرایی]]
    | value1 = 59
    | color1 = silver
    | label2 = [[کلیسای کاتولیک]]
    | value2 = 26.8
    | color2 = #008
    | label3 = [[پروتستانتیسم]]
    | value3 = 2.5
    | color3 = #08f }} The following example of [[الگو:نمودار گرد]] generates the pie chart shown at right. <pre style="overflow:auto"> {{نمودار گرد

| caption=[[Religion in the Czech Republic]] as of 2001.
 
    | other = yes
    | label1 = [[خداناباوری]]s and [[ندانم‌گرایی]]
    | value1 = 59
    | color1 = silver
    | label2 = [[کلیسای کاتولیک]]
    | value2 = 26.8
    | color2 = #008
    | label3 = [[پروتستانتیسم]]
    | value3 = 2.5
    | color3 = #08f }} </pre> {{پایان چپ‌چین}} {{بالای تاشو|Formatted/colorized template source for Template:Pie chart}} {{#invoke:FormatTemplate
    |format}} {{پایین تاشو}} {{بالای تاشو|Formatted/colorized template source for Template:Pie chart/slice}} {{#invoke:FormatTemplate
    |format
    |page=Template:Pie chart/slice}} {{پایین تاشو}} {{بالای تاشو|Formatted/colorized template source for Template:Legend}} {{#invoke:FormatTemplate
    |format
    |page=Template:Legend}} {{پایین تاشو}} {{بالای تاشو|Formatted/colorized template source for Template:Trim}} {{#invoke:FormatTemplate
    |format
    |page=Template:Trim}} {{پایین تاشو}} == الگوهای وابسته == * {{الگو|نمودار خشتی}} * {{الگو|جعبه اطلاعات حزب سیاسی/کرسی}} * [[پودمان:Chart]] * [[پودمان:Plotter]] {{طرح خطی، چارت سازمانی و طرح}} <includeonly>{{#ifeq:{{SUBPAGENAME}}
    |sandbox
    |
    | <!-- رده‌ها و میان‌ویکی‌ها را در اینجا اضافه کنید، ممنون --> [[رده:الگو:کارکردهای نمودار، نقشه، و قالب‌بندی گرافیکی]] [[رده:الگو:طرح خطی، چارت سازمانی و طرح]] }}</includeonly>:
Formatted/colorized template source for Template:Pie chart/slice

#تغییرمسیر [[الگو:نمودار گرد/برش]]:

Formatted/colorized template source for Template:Legend

#تغییرمسیر [[الگو:زیرنویس نقشه]]:

Formatted/colorized template source for Template:Trim

#تغییر_مسیر [[الگو:اصلاح]] {{R from move}}:

الگوهای وابسته

ویرایش