قالب:Graph:Pie chart
توثيق القالب[عرض] [عدّل] [تاريخ] [محو الاختزان] [استخدامات]Generic pie chart that uses data from an external data url. The url must return 'label' and 'value' columns, or the column names must be specified using 'valueColumn' and 'labelColumn' params.
Example[عدل]
 | الرسوم البيانية غير متاحةٍ مؤقتًا لأسبابٍ تقنيَّة. |
Parameters[عدل]
لا وصف.
| وسيط | وصف | نوع | حالة | |
|---|---|---|---|---|
| Graph data URL | query | دون وصف
| نص | اختياري |
| title | title | What to show as a graph description
| نص | اختياري |
| width | width | دون وصف
| رقم | اختياري |
| height | height | دون وصف
| رقم | اختياري |
| valueColumn | valueColumn | Name of the query result's column that contains value for the pie graph
| نص | اختياري |
| labelColumn | labelColumn | Name of the query result's column that contains label for the pie graph
| نص | اختياري |
See also[عدل]
{
"version": 2,
"width": 300,
"height": 300,
"data": [
{
// Data is retrieved from the Wikidat Query API (SPARQL).
"name": "table",
"url": "wikidatasparql:///?query=SELECT%20%3Flabel%20%3Fvalue%0A%7B%0A%09%7B%09SELECT%20%20%3Fp%20%28COUNT%28DISTINCT%20%3Fn%29%20as%20%3Fvalue%29%0A%09%09%7B%0A%20%20%09%09%09VALUES%20%3Fp3%20%7B%20psv%3AP570%20psv%3AP569%20%7D%0A%20%20%09%09%09%3Fn%20%3Fp3%20%3Fn1%20.%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Fn1%20wikibase%3AtimePrecision%20%3Fp%20.%0A%09%09%7D%0A%09%09GROUP%20BY%20%20%3Fp%0A%09%09ORDER%20BY%20ASC%28%3Fvalue%29%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%09%7D%0A%09%3Fitem%20wdt%3AP2803%20%3Fp1%0A%09FILTER%20%28%3Fp%20%3D%20%3Fp1%29%20%20%20%20%20%20%20%20%20%20%0A%09SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22ar%2Cen%22%20.%20%3Fitem%20rdfs%3Alabel%20%3Flabel%20%20%7D%0A%7D",
"format": { "type": "json" },
"transform": [
// sort in descending order using value as the sort key
{"type": "sort","by": "-value"},
// To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each {label, value} object
// These fields contain angles at which to start and stop drawing arcs. First element's start will be 0, and last element's end will be 360 degrees (in radians)
{"type": "pie","field": "value"}
]
}
],
// Scales are like functions -- marks use them to convert a data value into a visual value, like x or y coordinate on the graph, or a color value.
"scales": [
{
// This scale will be used to assign a color to each slice, using a palette of 10 colors
"name": "color",
"domain": {"data": "table","field": "label"},
"range": "category10",
"type": "ordinal"
}
],
"marks": [
{
// This mark draws the actual pie chart from the data source
// Each element is an arc between layout_start and layout_end angles (as calculated by the pie transformation)
// drawn with a given radius, stroke, and fill.
"from": {"data": "table"},
"type": "arc",
"properties": {
"enter": {
"fill": {"scale": "color","field": "label"},
// Use "width" signal divided by 2 for the outer radius
"outerRadius": {"signal": "width", "mult": 0.5},
"startAngle": {"field": "layout_start"},
"endAngle": {"field": "layout_end"},
"stroke": {"value": "white"},
"strokeWidth": {"value": 1}
}
}
},
{
// This mark draws labels around the pie chart after the pie chart has been drawn
"type": "text",
// Before drawing, we need to perform a number of calculations to figure out the exact location and orientation of the text
"from": {
"data": "table",
"transform": [
// For each data point (datum), each of these transformations will be ran in order.
// Formula transformation evaluates the expression and assigns result to the datapoint
// Size of the pie slice, in degrees: sliceSize = (end - start) * 180 / Pi
{ "type": "formula", "field": "sliceSize", "expr": "(datum.layout_end - datum.layout_start)*180/PI" },
// Draw text only if the slice of the arc is more than 2 degrees to avoid overcrowding
{ "type": "filter", "test": "datum.sliceSize > 2" },
// Determine the side of the pie chart we are on - left or right.
{ "type": "formula", "field": "invert", "expr": "datum.layout_mid*180/PI < 180 ? 1 : -1" },
// If on the left, the text should be right-aligned (go from the rim inward)
{ "type": "formula", "field": "align", "expr": "datum.invert > 0 ? 'left' : 'right'" },
// At what angle should the text be drawn relative to the point on the circle
{ "type": "formula", "field": "angle", "expr": "(datum.layout_mid*180/PI)-90*datum.invert" },
// Make font smaller for smaller pie slices
{ "type": "formula", "field": "fontSize", "expr": "datum.sliceSize > 20 ? 13 : (datum.sliceSize > 10 ? 11 : 10)" },
// Make font bold for largest pie slices
{ "type": "formula", "field": "fontWeight", "expr": "datum.sliceSize > 15 ? 'bold' : 'normal'" }
]
},
"properties": {
"enter": {
// Use the fields calculated in the transformation to draw category names
"align": {"field": "align"},
"angle": {"field": "angle"},
"baseline": {"value": "middle"},
"fill": {"value": "black"},
"fontSize": {"field": "fontSize"},
"fontWeight": {"field": "fontWeight"},
"radius": {"signal": "width", "mult": 0.5, "offset": 10},
"text": {"template": "\u007b{datum.value|number:',d' }\u007d"},
"theta": {"field": "layout_mid"}
}
}
}
],
// Show legend, using the scale named "color" as the source.
"legends": [{
"title": "Dates of birth/death precision",
"fill": "color",
"properties": {
"title": { "fontSize": {"value": 14} },
"symbols": { "stroke": {"value": "transparent"} },
"legend": {
"strokeWidth": {"value": 1.5},
// Set new position of the legend relative to the center of the graph, using graph's width & height
"x": {"signal":"width", "mult":0.5, "offset":60},
"y": {"signal":"height", "mult":-0.5}
}
}
}]
}