Template:Pie chart
Template:Pie chart
Usage
The labels and values of up to ten slices may be specified. All the parameters for three 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.
{{Pie chart
| thumb =
| caption =
| other =
| label1 =
| value1 =
| color1 =
| label2 =
| value2 =
| color2 =
| label3 =
| value3 =
| color3 =
}}
- option "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, specifythumb=left. - "caption" is a string of text that appears on a line just before the legend.
- option "
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 CSS color code or name. 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
- 1.
Limitations
- The template does not render correctly on mobile devices. See this page on the mobile site and a user's report of this issue.
- Minor issues with printing exist. We also need to implement a good fallback for Books.
- The values need to be percentages.
- Google Chrome and Safari do not appear to anti-alias borders, so the lines are a bit jagged.
- 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.
How it works
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 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.
Note that in the legacy browser Internet Explorer 6, applying transparent borders the standard way does not work. A workaround is used in the form of the CSS class "transborder", which has been added to MediaWiki:Common.css to make this template usable.
Pie slices are drawn in clockwise order in a counterclockwise direction. These pie slices are positioned:
- Below a 200x200px 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.
Example
The following example of Template:Pie chart generates the pie chart show at right.
{{Pie chart
| caption=[[Religion in the Czech Republic]] as of 2001.
| other = yes
| label1 = [[Atheist]]s and [[Agnosticism|agnostics]]
| value1 = 59 | color1 = silver
| label2 = [[Catholic Church|Catholics]]
| value2 = 26.8 | color2 = #008
| label3 = [[Protestantism|Protestants]]
| value3 = 2.5 | color3 = #08f
}}
Related pages
Content Disclaimer
Informasi ini disarikan dari Wikipedia dan disajikan kembali untuk tujuan edukasi. Konten tersedia di bawah lisensi CC BY-SA 3.0. Kami tidak bertanggung jawab atas ketidakakuratan data yang bersumber dari kontribusi publik tersebut.
- The information displayed on this website is sourced in part or in whole from Wikipedia and has been adapted for the purpose of restating it. We strive to provide accurate and relevant information, however:
- There is no guarantee of absolute accuracy. Wikipedia is an open, collaborative project that can be edited by anyone, so information is subject to change.
- It is not intended to constitute professional advice. The content displayed is for informational and educational purposes only. For important decisions (e.g., medical, legal, or financial), please consult a professional.
- Content copyright. Wikipedia is licensed under the Creative Commons Attribution-ShareAlike License (CC BY-SA). This means that content may be reused with appropriate attribution and shared under a similar license.
- Responsible use. Any risk arising from the use of information from this website is entirely the responsibility of the user.