Vorlage:Manueller Rahmen/Doku

Vorlage:Dokumentation/Seitenhinweis

Diese Vorlage kann genutzt werden, um ein der Einbindung von Bildern entsprechendes Aussehen zu erreichen. Sie ist insbesondere für die Einbindung von mittels Vorlage:Graph:Chart erstellten Diagrammen gedacht.

⧼templatedata-doc-params⧽

⧼templatedata-doc-param-name⧽		⧼templatedata-doc-param-desc⧽	⧼templatedata-doc-param-type⧽	⧼templatedata-doc-param-status⧽
Inhalt	`content`	Inhalt des Rahmens	⧼templatedata-doc-param-type-content⧽	⧼templatedata-doc-param-status-required⧽
Beschriftung	`caption`	Beschriftung auf dem Rahmen	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Ausrichtung	`align`	Ausrichtung des Rahmens auf der Seite ⧼templatedata-doc-param-suggestedvalues⧽ `right` `left` `center` ⧼templatedata-doc-param-example⧽ left ⧼templatedata-doc-param-autovalue⧽ right	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Breite	`width`	vorgegebene Breite des Rahmens in Pixeln, ohne Angabe px. Wenn leer, wird die Breite des Inhalts übernommen. ⧼templatedata-doc-param-example⧽ 200px	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Beschriftungsposition	`pos`	Position der Beschriftungszeile zum Inhalt (oben oder unten) ⧼templatedata-doc-param-suggestedvalues⧽ `top` `bottom` ⧼templatedata-doc-param-example⧽ bottom ⧼templatedata-doc-param-autovalue⧽ bottom	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Rahmen-CSS	`frame-style`	zusätzliche CSS-Definitionen für den Rahmen (thumbinner)	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Inhalt-CSS	`content-style`	zusätzliche CSS-Definitionen für den Inhalt (thumbimage)	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Beschriftungs-CSS	`caption-style`	zusätzliche CSS-Definitionen für die Beschriftung (thumbcaption)	⧼templatedata-doc-param-type-line⧽	⧼templatedata-doc-param-status-optional⧽
Link	`link`	Einblenden des typischen Details-Symbols bei Miniaturbildern mit angegebenem Linkziel	⧼templatedata-doc-param-type-wiki-page-name⧽	⧼templatedata-doc-param-status-optional⧽
Linküberschreibung	`linkoverride`	Details-Link komplett überschreiben mit angegebenem Wikitext	⧼templatedata-doc-param-type-content⧽	⧼templatedata-doc-param-status-optional⧽

Kopiervorlage

</syntaxhighlight>

Beispiele

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":8},{"y":7,"series":"y","x":9},{"y":9,"series":"y","x":10}]}],"width":400}</graph>

Beispiel-Säulendiagramm

</syntaxhighlight> <templatestyles src="Manueller Rahmen/styles.css" />

<graph>{"legends":[],"scales":[{"type":"ordinal","name":"x","zero":false,"domain":{"data":"chart","field":"x"},"padding":0.2,"range":"width","nice":true},{"type":"linear","name":"y","domain":{"data":"chart","field":"y"},"zero":true,"range":"height","nice":true},{"domain":{"data":"chart","field":"series"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"rect","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"series"}},"enter":{"y":{"scale":"y","field":"y"},"x":{"scale":"x","field":"x"},"y2":{"scale":"y","value":0},"width":{"scale":"x","offset":-1,"band":true},"fill":{"scale":"color","field":"series"}}},"from":{"data":"chart"}}],"height":100,"axes":[{"type":"x","title":"X","scale":"x","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false},{"type":"y","title":"Y","scale":"y","format":"d","properties":{"title":{"fill":{"value":"#54595d"}},"grid":{"stroke":{"value":"#54595d"}},"ticks":{"stroke":{"value":"#54595d"}},"axis":{"strokeWidth":{"value":2},"stroke":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"grid":false}],"data":[{"format":{"parse":{"y":"integer","x":"integer"},"type":"json"},"name":"chart","values":[{"y":10,"series":"y","x":1},{"y":12,"series":"y","x":2},{"y":6,"series":"y","x":3},{"y":14,"series":"y","x":4},{"y":2,"series":"y","x":5},{"y":10,"series":"y","x":8},{"y":7,"series":"y","x":9},{"y":9,"series":"y","x":10}]}],"width":400}</graph>

Beispiel-Säulendiagramm

Beispiel-Tortendiagramm

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Obstsorten","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":45,"x":"Äpfel"},{"y":35,"x":"Birnen"},{"y":20,"x":"Pfirsiche"}]}],"width":100}</graph>

</syntaxhighlight> <templatestyles src="Manueller Rahmen/styles.css" />

Beispiel-Tortendiagramm

<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}},"title":{"fill":{"value":"#54595d"}},"labels":{"fill":{"value":"#54595d"}}},"stroke":"color","title":"Obstsorten","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"value":100},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string"},"type":"json"},"name":"chart","values":[{"y":45,"x":"Äpfel"},{"y":35,"x":"Birnen"},{"y":20,"x":"Pfirsiche"}]}],"width":100}</graph>

Siehe auch