Aiuto:Grafici/Vega
Questa pagina di aiuto rappresenta una guida generale all'inserimento, all'utilizzo e alla gestione dei grafici su it.wiki.
È possibile inserire un grafico utilizzando il tag <graph>, fornito dall'estensione Graph di MediaWiki, che a sua volta si appoggia sulla libreria grafica Vega. Per agevolarne l'utilizzo, nella Teknopedia in italiano è disponibile il template {{Grafico}}, che ha delle funzionalità molto più limitate ma una sintassi più semplice.
Prima dell'introduzione dell'estensione Graph, tipicamente i grafici venivano creati utilizzando l'estensione EasyTimeline (e quindi il tag <timeline>), originariamente pensata appunto per le cronologie.
Template:Grafico
[modifica | modifica wikitesto]Il modo più semplice per inserire un grafico è utilizzare il template {{Grafico}}, che permette di creare grafici a linee, ad area e istogrammi, normali e cumulativi. Le istruzioni su come usarlo si trovano nella pagina del template.
Tag graph
[modifica | modifica wikitesto]Inserimento di un grafico
[modifica | modifica wikitesto]Un grafico è un JSON delimitato dai tag <graph> e </graph>. Un esempio di grafico a barre è il seguente:
Questo grafico non è disponibile a causa di un problema tecnico.
Si prega di non rimuoverlo.
Il cui sorgente è il seguente:
{
"version": 2,
"width": 400, "height": 300,
"padding": {"top": 10, "left": 30, "bottom": 20, "right": 10},
"data": [
{
"name": "table",
"values": [
{"x":"1999", "y":28}, {"x":"2000", "y":55}, {"x":"2001", "y":43},
{"x":"2002", "y":91}, {"x":"2003", "y":81}, {"x":"2004", "y":53},
{"x":"2005", "y":19}, {"x":"2006", "y":87}, {"x":"2007", "y":52}
]
}
],
"scales": [
{"name":"x", "type":"ordinal", "range":"width", "domain":{"data":"table", "field":"x"}},
{"name":"y", "range":"height", "nice":true, "domain":{"data":"table", "field":"y"}}
],
"axes": [
{"type":"x", "scale":"x"},
{"type":"y", "scale":"y"}
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"properties": {
"enter": {
"x": {"scale":"x", "field":"x"},
"width": {"scale":"x", "band":true, "offset":-1},
"y": {"scale":"y", "field":"y"},
"y2": {"scale":"y", "value":0}
},
"update": { "fill": {"value":"steelblue"} }
}
}
]
}
Un grafico può utilizzare file JSON esterni, come nel caso della seguente mappa:
Questo grafico non è disponibile a causa di un problema tecnico.
Si prega di non rimuoverlo.
Un grafico può essere incluso.
Sintassi
[modifica | modifica wikitesto]Dimensioni
[modifica | modifica wikitesto]Le dimensioni sono opzionali: le proprietà width e height regolano la larghezza e l'altezza del grafico, mentre padding permette di creare dei margini.
Dati
[modifica | modifica wikitesto]I dati sono contenuti nell'array data. Ogni elemento ha un nome univoco, assegnato tramite name, e i valori sono memorizzati in values. È possibile utilizzare dati esterni utilizzando url. Un esempio possibile di dati è il seguente:
"data": [
{
"name": "table",
"values": [12, 23, 47, 6, 52, 19]
},
{
"name": "points",
"url": "data/points.json"
}
],
Tipo
[modifica | modifica wikitesto]L'array marks definisce alcune caratteristiche visive del grafico. Ogni mark possiede la proprietà type che può assumere come valore stringhe, alcune delle quali sono le seguenti:
- "rect": visualizza rettangoli, serve a costruire grafici a barre
- "arc": visualizza archi circolari, serve a costruire grafici a torta
- "path": visualizza poligoni, serve a generare mappe
- "symbol": visualizza differenti figure geometriche
- "text": visualizza testo
La proprietà from serve ad indicare la sorgente dei dati del mark. Il mark possiede inoltre delle properties. Le principali sono enter, exit e update, più una opzionale hover. All'interno di ogni proprietà si definiscono i valori di x e y e il colore di riempimento utilizzando fill.
Pagine correlate
[modifica | modifica wikitesto]Collegamenti esterni
[modifica | modifica wikitesto]- (EN) Extension:Graph su MediaWiki
- (EN) Tutorial sull'uso di Vega
- (EN) Vega live editor