模板:Pie chart
 | 此模板的文档不存在、不全面或不能详细描述其功能及/或其代码中的参数。请帮助扩充并改进其文档。 |
模板介绍 编辑
这是制作圆饼图的模板
使用方法 编辑
本模板可以指定最多30个扇区及其图例。六个扇区的参数示例如下：
{{Pie chart
| radius = 100
| 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
}}
|radius=参数用于设定圆饼图的半径，预设为100|thumb=参数可以使整个模板向左或向右浮动显示，预设值right。|caption=参数可在图例上方增加题注。|other=用于替换“其他”图例的显示文本。- 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.
范例 编辑
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
}}
注意事项 编辑
- 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.
参见 编辑
给模板编辑者的说明 编辑
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.
模板结构 编辑
实现方法 编辑
编辑注意 编辑
| 上述文档嵌入自Template:Pie chart/doc。 (编辑 | 历史) 编者可以在本模板的沙盒 (创建 | 镜像)和测试样例 (创建)页面进行实验。 请在/doc子页面中添加分类。本模板的子页面。 |