साँचा:Pie chart/doc

मुक्त ज्ञानकोश विकिपीडिया से
नेविगेशन पर जाएँ खोज पर जाएँ

{{ 

 साँचा:namespace detect

| type = notice | image = | imageright = | class = | style = margin-bottom:1.0em; | textstyle = | text = साँचा:strong for साँचा:terminate sentence
It contains usage information, categories and other content that is not part of the original साँचा page. | small = | smallimage = | smallimageright = | smalltext = | subst = | date = | name = }}

Usage

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. 

{{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
}}
  • The parameter साँचा:para specifies the radius of the pie chart in pixels. Do not include a "px" suffix. If omitted, it will default to 100.
  • The parameter साँचा:para 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 साँचा:para.
  • The parameter साँचा:para specifies a string of text that appears on a line just before the legend.
  • The parameter साँचा:para specifies a string of text that appears below the legend.
  • The parameter साँचा:para, if specified, will cause an "Other" item to appear in the legend.
  • Each साँचा:para 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 साँचा:para 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 साँचा:para is a CSS color code or name. If omitted, it will default to the following hues:

साँचा:columns-list

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 use with the Wikipedia book tool.
  • The values need to be percentages.
  • 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; 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

How it works

साँचा:legendसाँचा:legendसाँचा:legendसाँचा:legendसाँचा:legendसाँचा:legendसाँचा:legend


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 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 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 साँचा:tlx 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

Religion in the Czech Republic as of 2001. साँचा:legendसाँचा:legendसाँचा:legendसाँचा:legend

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
 }}

See also

साँचा:collapse top

{{Documentation subpage}} <!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE --> __NOTOC__ === Usage === 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> {{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 }} </nowiki>

  • The parameter </nowiki>{{para|radius}} specifies the radius of the pie chart in pixels. Do not include a "px" suffix. If omitted, it will default to 100. * The parameter {{para|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 {{para|thumb
        |left}}. * The parameter {{para|caption}} specifies a string of text that appears on a line just before the legend. * The parameter {{para|footer}} specifies a string of text that appears ''below'' the legend. * The parameter {{para|other}}, if specified, will cause an "Other" item to appear in the legend. * Each {{para|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 {{para|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 {{para|color''N''}} is a [[Web colors|CSS color code or name]]. If omitted, it will default to the following hues: {{columns-list|colwidth=12em
        | # {{legend|#a6cee3
            |light blue}} # {{legend|#1f78b4
            |strong blue}} # {{legend|#b2df8a
            |light green}} # {{legend|#33a02c
            |strong green}} # {{legend|#fb9a99
            |fuchsia}} # {{legend|#e31a1c
            |red}} # {{legend|#fdbf6f
            |light orange}} # {{legend|#ff7f00
            |strong orange}} # {{legend|#cab2d6
            |light purple}} # {{legend|#6a3d9a
            |strong purple}} # {{legend|#ffff99
            |light yellow}} # {{legend|#b15928
            |brown}} }} === Limitations === * '''The template does not render correctly on mobile devices.''' See [http://en.m.wikipedia.org/wiki/{{FULLPAGENAMEE}} this page on the mobile site] and [[User talk:PleaseStand/Archive 4#Pie chart|a user's report of this issue]]. * Minor issues with printing exist. We also need to implement a good fallback for use with the [[WP:Books|Wikipedia book tool]]. * The values need to be percentages. * 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; 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''' === How it works === {{Pie chart

|other = yes
    |value1 = 42
    |label1 = One
    |color1 = Red
    |value2 = 32
    |label2 = Two
    |color2 = Yellow
    |value3 = 12
    |label3 = Three
    |color3 = Green
    |value4 = 3
    |label4 = Four
    |color4 = Blue
    |value5 = 2
    |label5 = Five
    |color5 = Orange
    |value6 = 1
    |label6 = Six
    |color6 = Brown }} 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 [[miter join]]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. Note that in the legacy browser [[Internet Explorer 6]], applying transparent borders the standard way does not work. A [http://acidmartin.wordpress.com/2008/08/24/emulating-border-color-transparent-in-internet-explorer-6/ workaround] is used in the form of the [[Wikipedia:Catalogue of CSS classes|class]] <code>transborder</code>, 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 [[: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 {{tlx|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 === {{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 following example of [[Template:Pie chart]] generates the pie chart show at right. <pre style="overflow:auto"> {{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
 }}
</pre>

=== See also ===
* {{tl|Brick chart}}
* {{tl|Composition bar}}
* [[Module:Chart]]
* [[Module:Plotter]]

{{collapse top|Formatted/colorized template source for Template:Pie chart}}
{{#invoke:FormatTemplate
    |format}}
{{collapse bottom}}
{{collapse top|Formatted/colorized template source for Template:Pie chart/slice}}
{{#invoke:FormatTemplate
    |format
    |page=Template:Pie chart/slice}}
{{collapse bottom}}
{{collapse top|Formatted/colorized template source for Template:Legend}}
{{#invoke:FormatTemplate
    |format
    |page=Template:Legend}}
{{collapse bottom}}
{{collapse top|Formatted/colorized template source for Template:Trim}}
{{#invoke:FormatTemplate
    |format
    |page=Template:Trim}}
{{collapse bottom}}
<includeonly>
<!-- CATEGORIES HERE, THANKS -->
[[Category:Chart formatting templates]]

</includeonly>:

साँचा:collapse bottom साँचा:collapse top <includeonly><div style="border:solid transparent;position:absolute;width:{{{radius|100}}}px;line-height:0;{{#switch:{{#expr:floor({{{2}}}/25)}} <!-- 0-25% -->
    |0= left:{{{radius|100}}}px; top:{{#expr:{{{radius|100}}}*(1-sin(pi/50*{{{2}}}))}}px; border-width:0 0 {{#expr:{{{radius|100}}}*sin(pi/50*{{{2}}})}}px {{#expr:{{{radius|100}}}*cos(pi/50*{{{2}}})}}px; border-bottom-color:{{{1}}} "></div> <!-- 25-50% -->
    |1= right:{{{radius|100}}}px; top:0; border-width:0 {{#expr:{{{radius|100}}}*tan(pi/50*({{{2}}}-25))}}px {{{radius|100}}}px 0; border-right-color:{{{1}}} "></div> <div style="position:absolute;line-height:0;border-style:solid;right:0;top:0;border-width:0 {{{radius|100}}}px {{{radius|100}}}px 0;border-color:{{{1}}}"></div> <!-- 50-75% -->
    |2= right:{{{radius|100}}}px; top:{{{radius|100}}}px; border-width:{{#expr:{{{radius|100}}}*sin(pi/50*({{{2}}}-50))}}px {{#expr:{{{radius|100}}}*cos(pi/50*({{{2}}}-50))}}px 0 0; border-top-color:{{{1}}} "></div> <div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 {{#expr:2*{{{radius|100}}}}}px {{{radius|100}}}px 0;border-color:{{{1}}}"></div> <!-- 75%-100% -->
    |3= left:{{{radius|100}}}px; top:{{{radius|100}}}px; border-width:{{{radius|100}}}px 0 0 {{#expr:{{{radius|100}}}*tan(pi/50*({{{2}}}-25))}}px; border-left-color:{{{1}}} "></div> <div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 {{#expr:2*{{{radius|100}}}}}px {{{radius|100}}}px 0;border-color:{{{1}}}"></div> <div style="position:absolute;line-height:0;border-style:solid;left:0;top:0;border-width:0 {{{radius|100}}}px {{#expr:2*{{{radius|100}}}}}px 0;border-color:{{{1}}}"></div> <!-- 100% -->
    |4= left:0; top:0; border-width:0 {{#expr:2*{{{radius|100}}}}}px {{#expr:2*{{{radius|100}}}}}px 0; border-color:{{{1}}} "></div> }}</includeonly><noinclude> {{documentation}} <!-- Add categories and interwikis to the /doc subpage, not here! --> </noinclude>:

साँचा:collapse bottom साँचा:collapse top <includeonly><!-- --><templatestyles src="Legend/styles.css" /><!-- --><div class="legend"><!-- --><span class="legend-color" style="<!-- -->{{#if:{{{border|}}}
    |border: {{{border}}};
    |{{#if:{{{outline|}}}
        |border: 1px solid {{{outline}}};}}}}<!-- -->{{#if:{{{1|}}}
    |{{greater color contrast ratio|{{{1}}}
        |white
        |black
        |css=y}}}}<!-- -->{{#if:{{{textcolor|}}}
    |color:{{{textcolor}}};}}<!-- -->{{#if:{{{size|}}}
    |font-size:{{{size}}};}}"><!-- -->{{#if:{{{text|}}}{{{alt|}}}
    | <span class="legend-text" style="{{#if:{{{alt|}}}
        |color:{{{1|}}};}}font-family: monospace, monospace;">{{If empty|{{{alt|}}}
        |{{{text|}}}
        | }}</span>
    | }}<!-- --></span><!-- --> {{{2|}}}<!-- --></div><!-- --></includeonly><noinclude> {{Documentation}} </noinclude>:

साँचा:collapse bottom साँचा:collapse top <includeonly>{{safesubst:#if:1|{{{x|{{{1|}}}}}}}}</includeonly><noinclude> {{Documentation}} </noinclude>:

साँचा:collapse bottom

"https://hiwiki.iiit.ac.in/index.php?title=साँचा:Pie_chart/doc&oldid=153986" से लिया गया