Predloga:Tortni diagram

1. vasi: 45,0%
2. mesta: 55,0%

Dokumentacija za predlogo[poglej] [uredi] [zgodovina] [osveži]

This template draws pie charts with HTML, CSS, and a Lua module. It can accept data formatted as:

• Enumerated values: |value1=123 |value2=456 (classic) or
• A simple array: |1=[{"value":123, "value":456}] (easy to re-order)

Usage

This template offers several different ways to draw pie charts. It can accept data as enumerated parameters (like many templates do). It can also accept data as an array. When placing the pie chart, the template can "float" it to either side of the body text (how image thumbnails are positioned). It can also place the chart as body content (how most tables are positioned).

Thumb (floating)

By default, the template generates charts as floating thumbnails.

Enumerated parameters

Default colors

1. #1b7837 (7,70%)
2. #7fbf7b (7,70%)
3. #d9f0d3 (7,70%)
4. #762a83 (7,70%)
5. #af8dc3 (7,70%)
6. #e7d4e8 (7,70%)
7. #d73027 (7,70%)
8. #fc8d59 (7,70%)
9. #fee090 (7,70%)
10. #4575b4 (7,70%)
11. #91bfdb (7,70%)
12. #e0f3f8 (7,70%)
13. other: #fff (7,60%)

The labels, values, and colors of slices may be specified. All the parameters for six slices are included in the example below. To add more slices, copy the code for an existing line and change the digit at the end of each parameter's name. Order the values by size, from largest to smallest. This will order the chart's slices in a clockwise direction, with the largest slice at 12 o'clock.

{{Pie chart
| thumb  = 
| radius = 
| caption= 
| footer = 

| label1 = | value1 = | color1 = 
| label2 = | value2 = | color2 = 
| label3 = | value3 = | color3 = 
| label4 = | value4 = | color4 = 
| label5 = | value5 = | color5 = 

| other  = 
| other-color = 
| other-label =
}}

Enumerated values

• |other=: If any value is given (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.
• |other-color=: Specify a color to override the default white for the "Other" slice.
• |other-label=: Give a name to override the default text from "Other" to any string.
• |labelN=: This string of text appears in the legend entry for each slice. Omitting it will cause a legend to be automatically generated.
• |valueN=: This should be the percentage that the slice represents or an actual value. Use |autoscale=true to automatically scale values to a percentage of the total. Values that add up to more than 100 will be scaled down automatically.
• |colorN=: Each slice can have a CSS color code or name. If omitted, the default color palette will be used. The default color palette is designed with accessibility and printing in mind.

Even though you could use as many values and labels as you want, at some point values will be too small to be readable. Values less then 1% don't make much sense. You could change the radius, but ultimately you should just use a wikitable instead. Pie chart should typically only have 2-10 values and the "Other" value.

Common parameters

• |thumb=: By default the chart is floated to the right of the body content, as with image files. To make the chart appear on the left side specify |thumb=left. To place the chart as body content (similar to how tables are placed by default), specify |thumb=none.
• |radius= You can specify a desired radius in pixels. Do not include a "px" suffix. The chart defaults to |radius=100.
• |caption=: The caption is a string of wikitext displayed above the legend.
• |footer=: The footer is a string of wikitext displayed below the legend.
• |autoscale=true: This means that the sum of values will be automatically scaled to 100%. So for values: 5, 15, the slices will be "5 (25%)" and "15 (75%)". If the total is over 100, this defaults to true.
• |legend=true: A legend will be added. Defaults to true if thumb is used.
• |direction=: When the chart is positioned as body content, this parameter changes the placement of the legend. Possible values are:
  • row: the order is a list, chart (default for thumb=none);
  • row-reverse: the reverse order, i.e., chart, list;
  • column: column arrangement (vertical);
  • column-reverse: column arrangement, reversed (chart on top; default for thumb=right/left).
• |width=: In most cases, you probably don't want to use this. It changes the width of the box. Normally, the box will be automatically scaled (for thumb=right or thumb=left, to pie radius; for thumb=none, to full available width).

Array of values

The template can also accept a JSON array of data, labels, and colors in the first unnamed parameter or |1=. An array is more strict in how the data must be formatted, but offers extra flexibility because you can easily rearrange the rows. This can simplify charts where the values will be frequently updated. It also simplifies the process of syncing charts across multiple articles or wikis.

• |1=[]: This parameter holds an array of all values for a chart. Each value can have a label and color.
  • just value: {"value": 1},
  • value and a label: {"label": "drinks", "value": 1},
  • with custom color: {"label": "drinks", "value": 1, "color":"#ccf"},
• To specify other:
  • you just add braces to the end of the array of values {} (this will mean the value is to be calculated automatically);
  • you can add a label {"label": "other citizens"};
  • you can add a custom color {"label": "other citizens", "color": "silver"}.

In the example below, the same lines of text are used to create charts arranged from most to least and from least to most. Only the order has changed:

Most to least	Least to most
Large to small sweets: 5 (45,5%) sandwiches: 3 (27,3%) cookies: 2 (18,2%) drinks: 1 (9,09%)	Small to large drinks: 1 (9,09%) cookies: 2 (18,2%) sandwiches: 3 (27,3%) sweets: 5 (45,5%)
{{Pie chart |[ {"label": "sweets", "value": 5, "color":"darkred"}, {"label": "sandwiches", "value": 3, "color":"wheat"}, {"label": "cookies", "value": 2, "color":"goldenrod"}, {"label": "drinks", "value": 1, "color":"#ccf"}, ] | autoscale = true | legend = true | thumb = left | radius = 100 | caption= Large to small<ref>References should work fine in captions</ref> | footer = }}	{{Pie chart |[ {"label": "drinks", "value": 1, "color":"#ccf"}, {"label": "cookies", "value": 2, "color":"goldenrod"}, {"label": "sandwiches", "value": 3, "color":"wheat"}, {"label": "sweets", "value": 5, "color":"darkred"}, ] | autoscale = true | legend = true | thumb = right | radius = 100 | caption= Small to large<ref>References should work fine in captions</ref> | footer = }}

Body content

Pie charts can also be positioned as body content. This is how most table are positioned in articles.

Minimal

The smallest possible definition of a graph that makes sense is below.

{{Pie chart| [ {"value":25},  {} ] |thumb=none}}

Labels with formatted value

You can add labels to values as shown below.

1. town: 25,0%
2. city: 75,0%

{{Pie chart
| [ 
 {"value":25, "label": "town"},
 {"label": "city"},
]
|thumb=none
|legend=true
}}

Note that a formatted value is added to each label.

See how the value adapts when large values are auto-scaled:

1. town: 2.500 (25,0%)
2. city: 7.500 (75,0%)

{{Pie chart
| [ 
 {"value":2500, "label": "town"},
 {"value":7500, "label": "city"},
]
|thumb=none
|legend=true
|autoscale=true
}}

Labels and advanced formatting templates

As shown above, a typical label: "Abc" will result in:

• "Abc: 23%" — when values are percentages (and sum up to 100)
• "Abc: 123,456,789 (23%)" — when values are auto-scaled

Label format

One can use labelformat option for formatting labels of all items. In most cases, the default format is the best choice as it automatically adapts to different contexts and makes chart more uniform.

Name	Example usage	Example render	Notes
$label	"$label - $value"	"Abc - 123"	In most case you will want to use $label with other variables.
$value	"$label - $value"	"Abc - 123"	"123" is just a value, but thousand separators will be added for larger numbers.
$percent	"($percent) $label"	"(10,5%) Abc"	Using $percent makes most sense when autoscale is on.
$percent with $value	"($percent) $label: $value mln"	"(10,5%) Abc: 123 mln"	Using $value explicitly allows you to easily add units (like "mln").
$auto	"$label: $auto"	"Abc: 123 (10,5%)"	This specific format is actually default.

Label format examples

Example of adding units in format (note $value in label and autoscale=true):

{{Pie chart
|1= [
	{"value":600, "label": "Flour"},
	{"value":300, "label": "Milk"},
	{"value":120, "label": "Butter"},
	{"value":100, "label": "Egg powder"},
	{"value":80, "label": "Sugar"},
]
|labelformat=$label $value g
|thumb=none
|legend=true
|autoscale=true
}}

1. Flour 600 g
2. Milk 300 g
3. Butter 120 g
4. Egg powder 100 g
5. Sugar 80 g

Example of showing precision of data:

{{Pie chart
|1= [
	{"value":500, "label": "Cappuccino"},
	{"value":420, "label": "Latte"},
	{"value":280, "label": "Espresso"},
	{"value":160, "label": "Tea"},
	{"value":90, "label": "Pastries"},
]
|labelformat=($percent) $label: $value ± 5
|thumb=none
|legend=true
|autoscale=true
}}

1. (34,5%) Cappuccino: 500 ± 5
2. (29,0%) Latte: 420 ± 5
3. (19,3%) Espresso: 280 ± 5
4. (11,0%) Tea: 160 ± 5
5. (6,21%) Pastries: 90 ± 5

Legend position

When drawing the chart as body content, the legend is positioned to the left of the chart by default. You can change the display position using the |direction= parameter. Possible values include:

Using "direction" to position the legend

Direction	Example
|direction=row (default) The legend is to the left of the chart.	cookies: 2 (18,2%) drinks: 1 (9,09%) sweets: 5 (45,5%) sandwiches: 3 (27,3%)
|direction=row-reverse (reverse order) The legend is to right of the chart.	cookies: 2 (18,2%) drinks: 1 (9,09%) sweets: 5 (45,5%) sandwiches: 3 (27,3%)
|direction=column (vertical) The legend is above the chart.	cookies: 2 (18,2%) drinks: 1 (9,09%) sweets: 5 (45,5%) sandwiches: 3 (27,3%)
|direction=column-reverse (vertical, reversed) The legend is below the chart.	cookies: 2 (18,2%) drinks: 1 (9,09%) sweets: 5 (45,5%) sandwiches: 3 (27,3%)

More examples

The following code generates the pie chart shown at right. Note that the default chart size and colors are used.

1. {"visible":false,"error":"cannot autoscale unknown value","label":"Drugo ($v)"}

1. 1 (4,76%)
2. 2 (9,52%)
3. 3 (14,3%)
4. 4 (19,0%)
5. 5 (23,8%)
6. 6 (28,6%)

{{Pie chart
|value1 = 1
|value2 = 2
|value3 = 3
|value4 = 4
|value5 = 5
|value6 = 6
|autoscale = true
}}

Here's a more real-world example with custom colors.

Religion in the Czech Republic in 2001.

1. Atheists and agnostics (59,0%)
2. Catholics (26,8%)
3. Protestants (2,50%)
4. Drugo (11,7%)

{{Pie chart
| caption= [[Religion in the Czech Republic]] in 2001.
| label1 = [[Atheist]]s and [[agnostic]]s
| value1 = 59
| color1 = darkgreen
| label2 = [[Catholic]]s
| value2 = 26,8
| color2 = brown
| label3 = [[Protestant]]s
| value3 = 2,5
| color3 = #08f
| other  = yes
| other-color = silver
}}

Limitations

• Some browsers might have problems with anti-aliasing borders properly, so the lines might be a bit jagged.
• 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).
• The default color palette is limited to 12 colors. It will loop, but a wikitable is more readable than a pie chart with too many slices.

Warnings and errors

Script warning: pie chart: Σ (value) = >100%

This preview warning appears when the values supplied are greater than 100. Double-check the data provided if it should be in percentage format. If you are using raw quantities for the template to calculate the percentages, add |autoscale=true to the template.

TemplateData

To je dokumentacija TemplateData za predlogo, ki jo uporabljajo Vizualni urejevalnik in druga orodja; glejte mesečno poročilo o uporabi parametrov za to predlogo.

TemplateData za Tortni diagram

Template to create pie charts (proportionally divided circles). Note that values are approximate and may be automatically scaled to 100%.

Parametri predloge[Urejanje podatkov predloge]

Za to predlogo je priporočljiva postavitev parametrov v bloku.

Parameter		Opis	Vrsta	Stanje
Chart items	1	Array of chart items, each being a set of properties for a slice: value, label, and color. For most items, only "value" is required (for the last item, even value can be omitted). Colors can be omitted and will be assigned automatically. Instead of this parameter, you can also use "value1", "label1", "color1"... Zgled {"label": "sweets", "value": 5, "color": "darkred"}	Niz	predlagano
labelformat	labelformat	Format of values in JSON mode. $auto is resolved differently when auto-scaling is on. Predlagane vrednosti $label: $auto $percent [$value]: $label Privzeto $label: $auto	Vrstica	predlagano
thumb	thumb	Specifies whether the chart is floated to the left or right, similar to an image. Predlagane vrednosti right left none Privzeto right	Vrstica	predlagano
legend	legend	If set to true, a legend will be added. Defaults to true if the thumb parameter is used. Predlagane vrednosti true false Privzeto true	Vrstica	predlagano
direction	direction	Determines the placement of the legend. The chart and legend can be arranged in a column or a row. Predlagane vrednosti row row-reverse column column-reverse Privzeto column-reverse	Vrstica	neobvezno
autoscale	autoscale	If set to true, the sum of values will be automatically scaled to 100%. Autoscale is always enabled when the sum of values exceeds 100. Predlagane vrednosti true false Privzeto false	Vrstica	predlagano
caption	caption	Specifies the chart's caption, which appears before the legend. Only use this parameter if the legend is enabled. The caption can contain references.	Vrstica	neobvezno
footer	footer	Specifies the chart's footer, which appears after the legend. Only use this parameter if the legend is enabled.	Vrstica	neobvezno
radius	radius	Specifies the radius of the pie chart in pixels. If omitted, the default is 100.	Številka	neobvezno
width	width	Specifies the box size in pixels. Remove this parameter to allow the size to adjust automatically (based on labels and graph size).	Številka	neobvezno
value1	value1	Value for the first item (used instead of the chart items array).	Neznano	neobvezno
label1	label1	Label for the first item (used instead of the chart items array).	Neznano	neobvezno
color1	color1	Color for the first item/slice (used instead of the chart items array).	Neznano	neobvezno
value2	value2	brez opisa	Neznano	neobvezno
label2	label2	brez opisa	Neznano	neobvezno
color2	color2	brez opisa	Neznano	neobvezno
value3	value3	brez opisa	Neznano	neobvezno
label3	label3	brez opisa	Neznano	neobvezno
color3	color3	brez opisa	Neznano	neobvezno
value4	value4	brez opisa	Neznano	neobvezno
label4	label4	brez opisa	Neznano	neobvezno
color4	color4	brez opisa	Neznano	neobvezno
value5	value5	brez opisa	Neznano	neobvezno
label5	label5	brez opisa	Neznano	neobvezno
color5	color5	brez opisa	Neznano	neobvezno
value6	value6	brez opisa	Neznano	neobvezno
label6	label6	brez opisa	Neznano	neobvezno
color6	color6	brez opisa	Neznano	neobvezno
value7	value7	brez opisa	Neznano	neobvezno
label7	label7	brez opisa	Neznano	neobvezno
color7	color7	brez opisa	Neznano	neobvezno
value8	value8	brez opisa	Neznano	neobvezno
label8	label8	brez opisa	Neznano	neobvezno
color8	color8	brez opisa	Neznano	neobvezno
value9	value9	brez opisa	Neznano	neobvezno
label9	label9	brez opisa	Neznano	neobvezno
color9	color9	brez opisa	Neznano	neobvezno
value10	value10	brez opisa	Neznano	neobvezno
label10	label10	brez opisa	Neznano	neobvezno
color10	color10	brez opisa	Neznano	neobvezno
other-label	other-label	brez opisa	Neznano	neobvezno
other-color	other-color	brez opisa	Neznano	neobvezno
other	other	brez opisa	Neznano	neobvezno

See also

• {{Brick chart}}
• {{Composition bar}}
• Module:Chart

Zgornja dokumentacija je vključena od Predloga:Tortni diagram/dok. (uredi | zgodovina)
Urejevalci lahko eksperimentirajo v peskovnik (uredi | razl) in testniprimeri (uredi) straneh te predloge.
Prosimo dodajte kategorije v /dok podstran. Podstran tega predloga.