תבנית:עוגה

המידע מטה מוצג מתוך הדף תבנית:עוגה/תיעוד.

---

Pie chart

You can add a pie chart with a call to this template.

Examples

Example usage:

{{עוגה | table = Wikimedia/all sites by browser family and major percent.tab | field1 = browserFamily | field2 = browserMajorVer | value = percent | width = 300 }}
לא ניתן להציג את הגרף באופן זמני – ההרחבה Graph להצגת תרשימים מושבתת כרגע. הצגה או עריכה של נתוני תרשים גולמיים.

Template Data

תרשםי ליצרת עוגה

פרמטרים של תבניות

פרמטר		תיאור	סוג	מצב
רוחב	width	מציין את רוחב התרשים בפיקסלים ערך התחלתי 300	מספר	מוצע
טבלה	table	שם דף המידע בוויקישיתוף, ללא הקידומת Data:. הטבלה צריכה להכיל לפחות שלוש עמודות - קבוצה ראשית, קבוצה משנית וערך מספרי.	מחרוזת	דרוש
שדה1	field1	מזהה עמודה של המעגל הפנימי	בלתי־ידוע	דרוש
שדה2	field2	מזהה עמודה של המעגל החיצוני	בלתי־ידוע	דרוש
ערך	value	מזהה עמודה עם ערך מספרי	בלתי־ידוע	דרוש
צבעים	colors	צבעי הפרוסות של העוגה.	מחרוזת	לא חובה
innerportion	innerportion	Portion of the radius shown for the inner circle. Must be between 0 and 0.5	מספר	לא חובה

Edit parameter translations

<graph>

{
  //
  // ATTENTION: This code is maintained at https://www.mediawiki.org/wiki/Template:Graph:Pie2
  //            Please do not modify it anywhere else, as it may get copied and override your changes.
  //            Suggestions can be made at https://www.mediawiki.org/wiki/Template_talk:Graph:Pie2
  //
  // Template translation is in https://commons.wikimedia.org/wiki/Data:Original/Template:Graphs.tab
  //

  "version": 2,
  "width": 300, "height": 300, "padding": "strict",
  "data": [
    {
      "name": "table",
      "url": "tabular:///Wikimedia/all sites by browser family and major percent.tab",
      "format": {"property": "data"}
    },
    {
      "name": "ring1",
      "source": "table",
      "transform": [
        {"type": "aggregate", "groupby": ["browserFamily"], "summarize": {"percent": "sum"} },
        {"type": "sort", "by": ["-sum_percent"]},
        {"type": "pie","field": "sum_percent"}
      ]
    },
    {
      "name": "ring2",
      "source": "table",
      "format": {"property": "data"},
      "transform": [
        {"type": "lookup", "on": "ring1", "onKey": "browserFamily", "keys": ["browserFamily"], "as": "r1"},
        {"type": "sort", "by": ["-r1.sum_percent", "-percent"]},
        {"type": "pie","field": "percent"},
      ]
    },
  ],
  "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "range": "category10",
      "domain": {"data": "ring2", "field": "browserFamily"}
    }
  ],
  "marks": [
    {
      "name": "inner_ring",
      "type": "arc",
      "from": {
        "data": "ring1"
      },
      "properties": {
        "enter": {
          "fill": {"scale": "color","field": "browserFamily"},
          "fillOpacity": {"value": 0.8},
          "stroke": {"value": "white"},
          "startAngle": {"field": "layout_start"},
          "endAngle": {"field": "layout_end"},
          "x": {"signal": "width", "mult": 0.5},
          "y": {"signal": "width", "mult": 0.5},
          "innerRadius": {"value": 0},
          "outerRadius": {"signal": "width", "mult": 0.35}
        }
      }
    },
    {
      "name": "outer_ring",
      "type": "arc",
      "from": {
        "data": "ring2",
        "transform": [
          {
            "type": "formula",
            "field": "opacity",
            "expr": "min(max(datum.percent / datum.r1.sum_percent, 0.2), 1)"
          }
        ]
      },
      "properties": {
        "enter": {
          "fill": {"scale": "color","field": "browserFamily"},
          "fillOpacity": {"field": "opacity"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 0.4},
          "startAngle": {"field": "layout_start"},
          "endAngle": {"field": "layout_end"},
          "x": {"signal": "width", "mult": 0.5},
          "y": {"signal": "width", "mult": 0.5},
          "innerRadius": {"signal": "width", "mult": 0.35},
          "outerRadius": {"signal": "width", "mult": 0.5},
        }
      }
    },
    {
      // 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": "ring1",
        "transform": [
          // For each data point (datum), each of these transformations will be ran in order.
          // 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 big enough to avoid overcrowding
          { "type": "filter", "test": "datum.sliceSize > 7.5" },
          // 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" },
        ]
      },
      "properties": {
        "enter": {
          "x": {"signal": "width", "mult": 0.5},
          "y": {"signal": "width", "mult": 0.5},
          "align": {"field": "align"},
          "angle": {"field": "angle"},
          "baseline": {"value": "middle"},
          "fill": {"value": "black"},
          "radius": {"signal": "width", "mult": 0.35, "offset": -7},
          "text": {"field": "browserFamily"},
          "theta": {"field": "layout_mid"}
        }
      }
    },
    {
      "type": "text",
      "from": {
        "data": "ring2",
        "transform": [
          { "type": "formula", "field": "sliceSize", "expr": "(datum.layout_end - datum.layout_start)*180/PI" },
          { "type": "filter", "test": "datum.sliceSize > 5" },
          { "type": "formula", "field": "invert", "expr": "datum.layout_mid*180/PI < 180 ? 1 : -1" },
          { "type": "formula", "field": "align", "expr": "datum.invert > 0 ? 'left' : 'right'" },
          { "type": "formula", "field": "angle", "expr": "(datum.layout_mid*180/PI)-90*datum.invert" },
        ]
      },
      "properties": {
        "enter": {
          "x": {"signal": "width", "mult": 0.5},
          "y": {"signal": "width", "mult": 0.5},
          "align": {"field": "align"},
          "angle": {"field": "angle"},
          "baseline": {"value": "middle"},
          "fill": {"value": "black"},
          "radius": {"signal": "width", "mult": 0.35, "offset": 12},
          "text": {"field": "browserMajorVer"},
          "theta": {"field": "layout_mid"}
        }
      }
    }
  ]
}

</graph>