Content deleted Content added
give the link up top |
Migration from the old template |
||
Line 2:
<!-- Add categories where indicated at the bottom of this page and interwikis at Wikidata -->
Smooth
== Usage ==
Line 8:
Draws charts in HTML with an accessible legend (optional). A list of all features is in the "TODO" section of the main `p.pie` function.
Most of the time you should use with a helper template that adds required CSS: {{t|
== Examples ==
Line 16:
Note that you don't need to provide the second value as it's calculated (assuming they sum up to 100).
<syntaxhighlight lang="wikitext">
{{
</syntaxhighlight>
{{
=== Labels and Legend ===
Here we add some custom labels. Also note that we add a meta option to add legend on the side.
<syntaxhighlight lang="wikitext">
{{
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
|thumb=none
|
}}
</syntaxhighlight>
{{
{"label": "women: $v", "value": 33.3},
{"label": "men: $v"}
]
|thumb=none
|
}}
Line 41 ⟶ 43:
<syntaxhighlight lang="wikitext">
{{
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
|thumb=none
|
}}
</syntaxhighlight>
{{
{"label": "women: $v", "value": 750},
{"label": "men: $v", "value": 250}
]
|thumb=none
|
}}
Line 58 ⟶ 62:
The module allows displaying multiple values, not just 2.
<syntaxhighlight lang="wikitext">
{{
{"label": "sweets: $v", "value": 5, "color":"darkred"},
{"label": "sandwiches: $v", "value": 3, "color":"wheat"},
Line 64 ⟶ 68:
{"label": "drinks: $v", "value": 1, "color":"#ccf"}
]
|thumb=none
|meta={"autoscale":true, "legend":true}
}}
</syntaxhighlight>
{{
{"label": "sweets: $v", "value": 5, "color":"darkred"},
{"label": "sandwiches: $v", "value": 3, "color":"wheat"},
Line 73 ⟶ 78:
{"label": "drinks: $v", "value": 1, "color":"#ccf"}
]
|thumb=none
|meta={"autoscale":true, "legend":true}
}}
Line 79 ⟶ 85:
=== Links ===
{{
{"label": "[[candy|sweets]]: $v", "value": 5, "color":"darkred"},
{"label": "[[sandwich]]es: $v", "value": 3, "color":"wheat"},
Line 85 ⟶ 91:
{"label": "[[drink]]s: $v", "value": 1, "color":"#ccf"}
]
|thumb=none
|meta={"autoscale":true, "legend":true}
}}
Line 96 ⟶ 103:
* column-reverse – column layout, reversed (chart on top).
<syntaxhighlight lang="wikitext">
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 102 ⟶ 109:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}
}}
Line 110 ⟶ 118:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''row''' (default ''direction'')
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 116 ⟶ 124:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"row"}
}}
Line 121 ⟶ 130:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''row-reverse'''
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 127 ⟶ 136:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}
}}
Line 134 ⟶ 144:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''column'''
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 140 ⟶ 150:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"column"}
}}
Line 145 ⟶ 156:
<div style="border:1px solid darkgreen; padding: 0 .5em .5em">
'''column-reverse'''
{{
{"label": "cookies: $v", "value": 2, "color":"goldenrod"},
{"label": "drinks: $v", "value": 1, "color":"#ccf"},
Line 151 ⟶ 162:
{"label": "sandwiches: $v", "value": 3, "color":"wheat"}
]
|thumb=none
|meta={"autoscale":true, "legend":true, "direction":"column-reverse"}
}}
Line 159 ⟶ 171:
== Direct functions ==
In case you want to use without the {{t|
* <code><nowiki>{{</nowiki>#invoke:Piechart|''pie''<nowiki>|json_data|meta=json_options}}</nowiki></code>
* <code><nowiki>{{</nowiki>#invoke:Piechart|''color''<nowiki>|number}}</nowiki></code>
Line 165 ⟶ 177:
Note that direct calls to the ''pie'' function require adding CSS:
<syntaxhighlight lang="javascript">
<templatestyles src="
{{#invoke:Piechart|pie| [ {"value":33.3}, {} ] }}
</syntaxhighlight>
Line 190 ⟶ 202:
== Feature requests ==
For feature requests and bugs write to me, the author of the
== See also ==
| |||