Aiuto:Grafici

Grafici con Chart.js su MediaWiki (Widget:Grafico)

Questa pagina spiega come usare il widget

per creare grafici con Chart.js su MediaWiki. Trovi la sintassi di base, tutti i parametri supportati e tanti esempi già pronti da copiare.

Parametri principali

id → identificatore univoco del grafico nella pagina.

chartType → tipo di grafico complessivo: line, bar, pie, doughnut, radar, polarArea, scatter, bubble. (Per grafici “misti” puoi dare chartType=bar e impostare seriesNtype=line su una serie.)

title → titolo del grafico.

labels → etichette sull’asse X (testuali o numeriche).

Numeriche (0,2,4,…) ⇒ asse X lineare.

Testuali (Gen,Feb,…) ⇒ asse X a categorie.

seriesNtitle, seriesNdata, seriesNcolor → nome, dati (CSV), colore della serie N.

seriesNtype → tipo specifico della serie (es. line dentro un grafico bar per fare misto).

fill → true/false (riempie l’area sotto la linea; per line/area).

stack → nome del gruppo di pila (per colonne/“cascata”).

xTitle, yTitle → testi degli assi.

yMin, yMax (e opzionalmente xMin, xMax) → limiti degli assi.

showLegend → true/false (mostra/nasconde legenda).

responsive → true/false.

1) Grafico a linea (base)

Codice

{{#widget:Grafico
 | id=linea1
 | chartType=line
 | title=Linea: valori semplici
 | labels=0,2,4,6,8,10
 | series1title=Serie A
 | series1data=2,3,5,4,6,7
 | series1color=#1f77b4
 | xTitle=Asse X
 | yTitle=Asse Y
 | yMin=0 | yMax=8
}}

2) Grafico area (linea con riempimento)

Codice:

{{#widget:Grafico
 | id=area1
 | chartType=line
 | title=Area (linea riempita)
 | labels=0,2,4,6,8,10
 | series1title=Serie A
 | series1data=1,2,3,4,3,2
 | series1color=#2ca02c
 | fill=true
 | xTitle=Asse X
 | yTitle=Valore
 | yMin=0 | yMax=5
}}

Spiegazione: fill=true riempie lo spazio sotto la linea → “grafico ad area”.

3) Grafico a colonne (barre verticali)

Codice:

{{#widget:Grafico
 | id=colonne1
 | chartType=bar
 | title=Colonne
 | labels=Lun,Mar,Mer,Gio,Ven
 | series1title=Presenze
 | series1data=12,15,9,11,14
 | series1color=#1f77b4
 | xTitle=Giorno
 | yTitle=Conteggio
 | yMin=0 | yMax=20
}}

4) Colonne impilate (stacked)

Codice:

{{#widget:Grafico
 | id=stack1
 | chartType=bar
 | title=Colonne impilate
 | labels=Q1,Q2,Q3,Q4
 | series1title=Prodotto A
 | series1data=10,12,8,9
 | series1color=#1f77b4
 | series1type=bar
 | stack=gruppo1
 | series2title=Prodotto B
 | series2data=6,7,5,6
 | series2color=#ff7f0e
 | series2type=bar
 | xTitle=Trimestre
 | yTitle=Vendite
 | yMin=0 | yMax=25
}}

Spiegazione: assegnando la stessa stack a più serie a colonne, le barre si impilano.

5) Grafico misto (colonne + linea)

Codice

{{#widget:Grafico
 | id=misto1
 | chartType=bar
 | title=Misto: colonne + linea
 | labels=Gen,Feb,Mar,Apr,Mag,Jun
 | series1title=Vendite
 | series1data=10,12,9,11,15,13
 | series1color=#1f77b4
 | series1type=bar
 | series2title=Media mobile
 | series2data=9,10,10,11,12,13
 | series2color=#d62728
 | series2type=line
 | xTitle=Mese
 | yTitle=Valore
 | yMin=0 | yMax=20
}}

6) Torta (pie)

Codice

{{#widget:Grafico
 | id=pie1
 | chartType=pie
 | title=Torta: quote percentuali
 | labels=Centro,Periferia,Campagna
 | series1title=Distribuzione
 | series1data=45,35,20
 | series1color=#1f77b4
 | xTitle=Sezioni
 | yTitle=Percentuale
 | yMin=0 | yMax=100
}}

Spiegazione: per pie/doughnut usa una sola serie con valori positivi; le labels sono le fette.

7) Doughnut (ciambella)

Codice

{{#widget:Grafico
 | id=doughnut1
 | chartType=doughnut
 | title=Ciambella: ripartizione
 | labels=A,B,C,D
 | series1title=Quote
 | series1data=30,25,20,25
 | series1color=#ff7f0e
 | yMin=0 | yMax=100
}}

8) Radar

Codice

{{#widget:Grafico
 | id=radar1
 | chartType=radar
 | title=Radar: competenze
 | labels=Matematica,Logica,Linguaggi,Storia,Geografia
 | series1title=Classe A
 | series1data=80,70,65,60,75
 | series1color=#1f77b4
 | showLegend=true
}}

9) Scatter (punti X,Y)

Codice

{{#widget:Grafico
 | id=scatter1
 | chartType=scatter
 | title=Scatter: relazione X-Y
 | labels=0,1,2,3,4,5,6,7,8,9,10
 | series1title=Punti
 | series1data=0,1,4,9,16,25,36,49,64,81,100
 | series1color=#2ca02c
 | xTitle=X
 | yTitle=Y
 | yMin=0 | yMax=110
}}

Spiegazione: con labels numeriche, i Y vengono agganciati alle X corrispondenti.

10) Parabola (curva da funzione)

Codice

{{#widget:Grafico
 | id=parabola1
 | chartType=line
 | title=Parabola y = 100 - x^2
 | labels=0,1,2,3,4,5,6,7,8,9,10
 | series1title=Curva
 | series1data=100,99,96,91,84,75,64,51,36,19,0
 | series1color=#ff7f0e
 | xTitle=x
 | yTitle=y
 | yMin=0 | yMax=105
 | showLegend=false
}}

11) Cascata (emulata con colonne impilate)

Codice

{{#widget:Grafico
 | id=cascata1
 | chartType=bar
 | title=Cascata (emulazione)
 | labels=Base,Aggiunta1,Aggiunta2,Costi,Totale
 | series1title=Positivo
 | series1data=100,20,15,0,0
 | series1color=#2ca02c
 | series1type=bar
 | stack=wf
 | series2title=Negativo
 | series2data=0,0,0,-30,0
 | series2color=#d62728
 | series2type=bar
 | xTitle=Voci
 | yTitle=Valore
 | yMin=0 | yMax=140
}}

Spiegazione: non esiste un tipo “waterfall” nativo in Chart.js; lo si emula con serie a colonne impilate (positivi/negativi).