Aiuto:Grafici

Guida ai grafici su WikiLectio

Su WikiLectio puoi inserire dei grafici interattivi usando il comando:

{{#widget:Grafico ... }}

Il grafico viene generato automaticamente con la libreria Chart.js.

---

Sintassi base

Esempio minimo:

{{#widget:Grafico
 | id=esempio1
 | title=Andamento prezzi
 | labels=0,2,4,6,8,10
 | series1title=Prezzo
 | series1data=2,3,5,4,6,7
 | series1color=#1f77b4
 | xTitle=Quantità
 | yTitle=Prezzo
}}

Risultato:

---

Due serie: Domanda e Offerta

{{#widget:Grafico
 | id=esempio2
 | title=Domanda e Offerta
 | labels=0,2,4,6,8,10
 | series1title=Domanda
 | series1data=10,8,6,4,2,0
 | series1color=#d62728
 | series2title=Offerta
 | series2data=0,2,4,6,8,10
 | series2color=#1f77b4
 | xTitle=Quantità
 | yTitle=Prezzo
}}

Risultato:

---

Con punto di equilibrio

{{#widget:Grafico
 | id=esempio3
 | title=Equilibrio di mercato
 | labels=0,2,4,6,8,10
 | series1title=Domanda
 | series1data=10,8,6,4,2,0
 | series1color=#d62728
 | series2title=Offerta
 | series2data=0,2,4,6,8,10
 | series2color=#1f77b4
 | xTitle=Quantità
 | yTitle=Prezzo
 | eqX=5 | eqY=5
}}

Risultato:

---

Etichette testuali (es. mesi)

{{#widget:Grafico
 | id=esempio4
 | title=Prezzi medi mensili
 | labels=Gen,Feb,Mar,Apr,Mag,Giu
 | series1title=Prezzo medio
 | series1data=650,660,640,670,690,700
 | series1color=#2ca02c
 | xTitle=Mese
 | yTitle=Prezzo (€)
}}

Risultato:

---

Tre serie

{{#widget:Grafico
 | id=esempio5
 | title=Confronto zone cittadine
 | labels=2019,2020,2021,2022,2023,2024
 | series1title=Centro
 | series1data=900,920,940,1000,1050,1100
 | series1color=#1f77b4
 | series2title=Periferia
 | series2data=600,610,620,640,660,680
 | series2color=#9467bd
 | series3title=Campagna
 | series3data=500,510,515,520,530,540
 | series3color=#8c564b
 | xTitle=Anno
 | yTitle=Affitto medio (€)
}}

Risultato:

---

Opzioni utili

• **showLegend=false** → nasconde la legenda
• **responsive=true** → il grafico si adatta alla larghezza della pagina
• **yMin / yMax** → fissa i limiti dell’asse Y
• **xMin / xMax** → fissa i limiti dell’asse X (solo con etichette numeriche)
• **eqX / eqY** → aggiunge un punto di equilibrio (pallino nero)

Esempio con legenda nascosta e scala Y fissa:

{{#widget:Grafico
 | id=esempio6
 | title=Scala fissa
 | labels=0,2,4,6,8,10
 | series1title=Serie A
 | series1data=4,5,6,7,8,9
 | series1color=#e377c2
 | xTitle=Quantità
 | yTitle=Valore
 | yMin=0 | yMax=10
 | showLegend=false
}}

Risultato:

---

Nota finale

Questa guida è pensata per l’utente comune: basta copiare e incollare i codici negli appunti della lezione o in qualsiasi altra pagina. Non serve toccare file o configurazioni del sito.