سانچہ:Pie chart

دستاویز [نمائش] [ترمیم] [تاریخچہ] [تطہیر]

This is a template that draws pie charts using a single image, a lot of (inline) CSS code generated by parser functions, and absolutely no JavaScript. Some details of how it works are given below.

Usage

The labels, values, and colors 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. When making a pie chart, ensure that the segments are ordered by size (largest to smallest) and in a clockwise direction.

{{Pie chart
| thumb  = 
| radius = 
| caption= 
| footer = 
| label1 = 
| value1 = 
| color1 = 
| label2 = 
| value2 = 
| color2 = 
| label3 = 
| value3 = 
| color3 = 
| label4 = 
| value4 = 
| color4 = 
| label5 = 
| value5 = 
| color5 = 
| label6 = 
| value6 = 
| color6 = 
| other  = 
| other-color = 
| other-label =
}}

Parameters

Default colors

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  سانچہ:Gcolor (7%)

  Other (37%)

• |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.
• |radius= specifies the radius of the pie chart in pixels. Do not include a "px" suffix. If omitted, it will default to 100.
• |caption= specifies a string of text that appears on a line just before the legend.
• |footer= specifies a string of text that appears below the legend.
• |other=, if set equal to any visible string (even "0" or "no"), an "Other" item will appear in the legend, corresponding to the final slice that makes the values add up to 100. (If the total is already over 100, then the "Other" percentage will be negative.)
• |other-color= can be used to override the default white color of the "Other" slice.
• |other-label= can be used to override the default text from "Other" to any other string.
• 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 (e.g., for eighty percent, use the value "80", not "80%" or ".80"). Collectively, the values must add to 100 or less (in the latter case, a final slice completes the pie, whether |other= is specified or not). Also note that each value is shown in the legend exactly as written, without any rounding or other reformatting.
• Each |colorN= is a ویب رنگ. If omitted, the default color palette seen in the pie chart to the right is used. If you need to graph more than 14 values (not counting the "Other" slice), then you should specify |color15= onwards in the template call.

Limitations

• Google Chrome and Safari do not appear to anti-alias borders, so the lines are a bit jagged. (For Chrome, this issue seems to be resolved, as of version 26.)
• Due to how the graphing is implemented, it is not possible to save a copy of the chart using the browser's "Save Image" function (however, a screenshot can be taken).
• If |other= is set, the final slice is always labeled as "Other" in the legend. This is not configurable. If you don't like that, just add to the template call another slice with the appropriate value (to sum to 100) and the desired label, and don't use |other=.
• No labels can be put on the slices themselves.
• The maximum number of slices that can be displayed is 30.
• Currently the default colors used for slices 15 onwards are all the same as the default color of slice 14.
• If the specified values add to 100 and |other= is set, the calculated percentage for that slice can sometimes turn out to be very strange (e.g., "1.4210854715202E-14%" instead of "0%")

Examples

The following code generates the pie chart shown at right. Note that the default chart size and colors are used, and the value of "1" for the "other" parameter is only used for its "truth value" as a visible string—i.e., to say, yes, we want an "Other" entry in the legend (the same chart would result if "0" were used).

  One (42%)

  Two (32%)

  Three (12%)

  Four (3%)

  Five (2%)

  Six (1%)

  Other (8%)

{{Pie chart
|value1 = 42
|label1 = One
|value2 = 32
|label2 = Two
|value3 = 12
|label3 = Three
|value4 = 3
|label4 = Four
|value5 = 2
|label5 = Five
|value6 = 1
|label6 = Six
|other = 1
}}

Here's a more real-world example.

Religion in the Czech Republic in 2001.

  دہریتs and لاادریs (59%)

  کاتھولک کلیسیاs (26.8%)

  پروٹسٹنٹ مسیحیتs (2.5%)

  Other (11.7%)

{{Pie chart
| caption= [[Religion in the Czech Republic]] in 2001.
| label1 = [[دہریت]]s and [[لاادری]]s
| value1 = 59
| color1 = darkgreen
| label2 = [[کاتھولک کلیسیا]]s
| value2 = 26.8
| color2 = brown
| label3 = [[پروٹسٹنٹ مسیحیت]]s
| value3 = 2.5
| color3 = #08f
| other  = yes
| other-color = silver
}}

How it works

This template uses a technique for drawing diagonal lines in CSS exploiting the fact that borders set on elements are miter joined. 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:

• Inside a square element of (2 * radius)x(2 * radius) pixels
• with border-radius: radiuspx for a circular shape
• with a white (or other specified color) background visible in the empty space that occurs if the "other" slice is present
• and 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.

Template data

ذیل میں اس سانچہ کی معلومات سانچہ دستاویز درج ہے جنہیں بصری خانہ ترمیم اور دیگر آلات استعمال کرتے ہیں۔

معلومات سانچہ Pie chart

Data used by citation tools

کوئی وضاحت نہیں۔ محددات سانچہ[انتظام TemplateData] پیرامیٹر وضاحت طرز حالت thumb thumb کوئی وضاحت نہیں Unknown اختیاری style style کوئی وضاحت نہیں Unknown اختیاری radius radius کوئی وضاحت نہیں Unknown اختیاری other-color other-color کوئی وضاحت نہیں Unknown اختیاری value30 value30 کوئی وضاحت نہیں Unknown اختیاری color30 color30 کوئی وضاحت نہیں Unknown اختیاری value1 value1 کوئی وضاحت نہیں Unknown اختیاری value2 value2 کوئی وضاحت نہیں Unknown اختیاری value3 value3 کوئی وضاحت نہیں Unknown اختیاری value4 value4 کوئی وضاحت نہیں Unknown اختیاری value5 value5 کوئی وضاحت نہیں Unknown اختیاری value6 value6 کوئی وضاحت نہیں Unknown اختیاری value7 value7 کوئی وضاحت نہیں Unknown اختیاری value8 value8 کوئی وضاحت نہیں Unknown اختیاری value9 value9 کوئی وضاحت نہیں Unknown اختیاری value10 value10 کوئی وضاحت نہیں Unknown اختیاری value11 value11 کوئی وضاحت نہیں Unknown اختیاری value12 value12 کوئی وضاحت نہیں Unknown اختیاری value13 value13 کوئی وضاحت نہیں Unknown اختیاری value14 value14 کوئی وضاحت نہیں Unknown اختیاری value15 value15 کوئی وضاحت نہیں Unknown اختیاری value16 value16 کوئی وضاحت نہیں Unknown اختیاری value17 value17 کوئی وضاحت نہیں Unknown اختیاری value18 value18 کوئی وضاحت نہیں Unknown اختیاری value19 value19 کوئی وضاحت نہیں Unknown اختیاری value20 value20 کوئی وضاحت نہیں Unknown اختیاری value21 value21 کوئی وضاحت نہیں Unknown اختیاری value22 value22 کوئی وضاحت نہیں Unknown اختیاری value23 value23 کوئی وضاحت نہیں Unknown اختیاری value24 value24 کوئی وضاحت نہیں Unknown اختیاری value25 value25 کوئی وضاحت نہیں Unknown اختیاری value26 value26 کوئی وضاحت نہیں Unknown اختیاری value27 value27 کوئی وضاحت نہیں Unknown اختیاری value28 value28 کوئی وضاحت نہیں Unknown اختیاری value29 value29 کوئی وضاحت نہیں Unknown اختیاری color29 color29 کوئی وضاحت نہیں Unknown اختیاری color28 color28 کوئی وضاحت نہیں Unknown اختیاری color27 color27 کوئی وضاحت نہیں Unknown اختیاری color26 color26 کوئی وضاحت نہیں Unknown اختیاری color25 color25 کوئی وضاحت نہیں Unknown اختیاری color24 color24 کوئی وضاحت نہیں Unknown اختیاری color23 color23 کوئی وضاحت نہیں Unknown اختیاری color22 color22 کوئی وضاحت نہیں Unknown اختیاری color21 color21 کوئی وضاحت نہیں Unknown اختیاری color20 color20 کوئی وضاحت نہیں Unknown اختیاری color19 color19 کوئی وضاحت نہیں Unknown اختیاری color18 color18 کوئی وضاحت نہیں Unknown اختیاری color17 color17 کوئی وضاحت نہیں Unknown اختیاری color16 color16 کوئی وضاحت نہیں Unknown اختیاری color15 color15 کوئی وضاحت نہیں Unknown اختیاری color14 color14 کوئی وضاحت نہیں Unknown اختیاری color13 color13 کوئی وضاحت نہیں Unknown اختیاری color12 color12 کوئی وضاحت نہیں Unknown اختیاری color11 color11 کوئی وضاحت نہیں Unknown اختیاری color10 color10 کوئی وضاحت نہیں Unknown اختیاری color9 color9 کوئی وضاحت نہیں Unknown اختیاری color8 color8 کوئی وضاحت نہیں Unknown اختیاری color7 color7 کوئی وضاحت نہیں Unknown اختیاری color6 color6 کوئی وضاحت نہیں Unknown اختیاری color5 color5 کوئی وضاحت نہیں Unknown اختیاری color4 color4 کوئی وضاحت نہیں Unknown اختیاری color3 color3 کوئی وضاحت نہیں Unknown اختیاری color2 color2 کوئی وضاحت نہیں Unknown اختیاری color1 color1 کوئی وضاحت نہیں Unknown اختیاری caption caption کوئی وضاحت نہیں Unknown اختیاری label1 label1 کوئی وضاحت نہیں Unknown اختیاری label2 label2 کوئی وضاحت نہیں Unknown اختیاری label3 label3 کوئی وضاحت نہیں Unknown اختیاری label4 label4 کوئی وضاحت نہیں Unknown اختیاری label5 label5 کوئی وضاحت نہیں Unknown اختیاری label6 label6 کوئی وضاحت نہیں Unknown اختیاری label7 label7 کوئی وضاحت نہیں Unknown اختیاری label8 label8 کوئی وضاحت نہیں Unknown اختیاری label9 label9 کوئی وضاحت نہیں Unknown اختیاری label10 label10 کوئی وضاحت نہیں Unknown اختیاری label11 label11 کوئی وضاحت نہیں Unknown اختیاری label12 label12 کوئی وضاحت نہیں Unknown اختیاری label13 label13 کوئی وضاحت نہیں Unknown اختیاری label14 label14 کوئی وضاحت نہیں Unknown اختیاری label15 label15 کوئی وضاحت نہیں Unknown اختیاری label16 label16 کوئی وضاحت نہیں Unknown اختیاری label17 label17 کوئی وضاحت نہیں Unknown اختیاری label18 label18 کوئی وضاحت نہیں Unknown اختیاری label19 label19 کوئی وضاحت نہیں Unknown اختیاری label20 label20 کوئی وضاحت نہیں Unknown اختیاری label21 label21 کوئی وضاحت نہیں Unknown اختیاری label22 label22 کوئی وضاحت نہیں Unknown اختیاری label23 label23 کوئی وضاحت نہیں Unknown اختیاری label24 label24 کوئی وضاحت نہیں Unknown اختیاری label25 label25 کوئی وضاحت نہیں Unknown اختیاری label26 label26 کوئی وضاحت نہیں Unknown اختیاری label27 label27 کوئی وضاحت نہیں Unknown اختیاری label28 label28 کوئی وضاحت نہیں Unknown اختیاری label29 label29 کوئی وضاحت نہیں Unknown اختیاری label30 label30 کوئی وضاحت نہیں Unknown اختیاری other other کوئی وضاحت نہیں Unknown اختیاری other-label other-label کوئی وضاحت نہیں Unknown اختیاری footer footer کوئی وضاحت نہیں Unknown اختیاری