Test: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
Admin (Diskussion | Beiträge) Markierung: Zurückgesetzt |
Admin (Diskussion | Beiträge) Markierung: Zurückgesetzt |
||
Zeile 17: | Zeile 17: | ||
}} | }} | ||
{{ | <includeonly>{{#tag:graph|</includeonly><noinclude>{{ {{FULLPAGENAME}} }}<br>'''<graph>'''{{#tag:syntaxhighlight|</noinclude> | ||
{ | |||
"version": 2, | |||
{{ | "width": 300, | ||
"height": 300, | |||
"data": [ | |||
{ | |||
{ | // Data is retrieved from the MediaWiki API. By default it uses current wiki's "Extension by category" | ||
"name": "table", | |||
"url": "wikiapi://{{{2|}}}/?generator=categorymembers&gcmtitle=Category:{{urlencode:{{{1|Extensions by category}}}}}&gcmtype=subcat&action=query&gcmlimit=max&prop=categoryinfo&formatversion=2&format=json", | |||
// We are only interested in the content of query.pages subelement. | |||
"format": {"property": "query.pages","type": "json"}, | |||
"transform": [ | |||
// sort in descending order using category size as the sort key | |||
{"type": "sort","by": "-categoryinfo.size"}, | |||
// To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each page 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": "categoryinfo.size"} | |||
] | |||
} | |||
], | |||
// 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": "title"}, | |||
"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": "title"}, | |||
"outerRadius": {"value": 200}, | |||
"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" }, | |||
// Remove namespace from the text - keeps only text after the first ':' symbol, limits to 40 chars. | |||
{ "type": "formula", "field": "title", "expr": "substring(datum.title, 1+indexof(datum.title,':'), 40)" }, | |||
// 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 ? 15 : (datum.sliceSize > 10 ? 14 : 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": {"value": 270}, | |||
"text": {"field": "title"}, | |||
"theta": {"field": "layout_mid"} | |||
} | |||
} | |||
} | |||
] | |||
} | |||
<includeonly>}}</includeonly><noinclude>|lang=javascript}}'''</graph>'''</noinclude> |
Version vom 25. Juli 2022, 20:36 Uhr
Vorlage:Test
<graph><syntaxhighlight lang="javascript">
{
"version": 2, "width": 300, "height": 300, "data": [ { // Data is retrieved from the MediaWiki API. By default it uses current wiki's "Extension by category" "name": "table", "url": "wikiapi:///?generator=categorymembers&gcmtitle=Category:Extensions+by+category&gcmtype=subcat&action=query&gcmlimit=max&prop=categoryinfo&formatversion=2&format=json", // We are only interested in the content of query.pages subelement. "format": {"property": "query.pages","type": "json"}, "transform": [ // sort in descending order using category size as the sort key {"type": "sort","by": "-categoryinfo.size"}, // To visualize, use "pie" transformation to add layout_start, layout_end, and layout_mid fields to each page 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": "categoryinfo.size"} ] } ], // 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": "title"}, "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": "title"}, "outerRadius": {"value": 200}, "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" }, // Remove namespace from the text - keeps only text after the first ':' symbol, limits to 40 chars. { "type": "formula", "field": "title", "expr": "substring(datum.title, 1+indexof(datum.title,':'), 40)" }, // 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 ? 15 : (datum.sliceSize > 10 ? 14 : 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": {"value": 270}, "text": {"field": "title"}, "theta": {"field": "layout_mid"} } } } ]
} </syntaxhighlight></graph>