قالب: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

<graph> {

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

} </graph>See it in Wikidata Query Service

Parameters

لا وصف.

وسائط القالب[تحرير بيانات القالب]

وسيط		وصف	نوع	حالة
Graph data URL	query	دون وصف مثال SELECT... قيمة تلقائية	نص	اختياري
title	title	What to show as a graph description قيمة تلقائية	نص	اختياري
width	width	دون وصف غيابي 300	رقم	اختياري
height	height	دون وصف غيابي 300	رقم	اختياري
valueColumn	valueColumn	Name of the query result's column that contains value for the pie graph غيابي value	نص	اختياري
labelColumn	labelColumn	Name of the query result's column that contains label for the pie graph غيابي label	نص	اختياري