Aiuto:Grafici - Cronologia

Tostho: aggiunto avviso di non utilizzo

2025-09-23T20:38:36Z

aggiunto avviso di non utilizzo

← Versione meno recente		Versione delle 22:38, 23 set 2025
Riga 1:		Riga 1:

			!!! ATTENZIONE I GRAFICI SONO ANCORA IN FASE DI IMPLEMENTAZIONE NON VANNO IMPLEMENTATI FINCHÈ NON VENGONO RISOLTI I VARI PROBLEMI CON CHART.JS !!!






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

Tostho: /* 8) Radar */

2025-09-23T20:10:12Z

8) Radar

← Versione meno recente		Versione delle 22:10, 23 set 2025
Riga 189:		Riga 189:

	=== 8) Radar ===		=== 8) Radar ===
	{{#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~~ }}		{{#widget:Grafico
			\| id=radar1
			\| chartType=radar
			\| labels=Forza,Velocità,Intelligenza,Agilità,Resistenza
			\| series1title=Eroe A
			\| series1data=65,59,90,81,56
			\| series2title=Eroe B
			\| series2data=28,48,40,19,96
			}}


	Codice		Codice
Riga 196:		Riga 205:
	\| id=radar1		\| id=radar1
	\| chartType=radar		\| chartType=radar
	~~\| title=Radar: competenze~~		\| labels=Forza,Velocità,Intelligenza,Agilità,Resistenza
	\| labels=~~Matematica~~,~~Logica~~,~~Linguaggi~~,~~Storia~~,~~Geografia~~		\| series1title=Eroe A
	\| series1title=~~Classe~~ A		\| series1data=65,59,90,81,56
	\| series1data=80,70,65,60,75		\| series2title=Eroe B
	\| ~~series1color~~=~~#1f77b4~~		\| series2data=28,48,40,19,96
	\| ~~showLegend~~=~~true~~
	}}		}}

	</pre>		</pre>

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

2025-09-23T19:56:10Z

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

← Versione meno recente		Versione delle 21:56, 23 set 2025
Riga 1:		Riga 1:
	== Grafici con Chart.js su MediaWiki (Widget:Grafico) ==		== Grafici con Chart.js su MediaWiki (Widget:Grafico) ==

	Questa pagina spiega come usare il ~~widget <pre>{{#widget~~:Grafico~~}}</pre>~~ per creare grafici con Chart.js su MediaWiki. Trovi la sintassi di base, tutti i parametri supportati e tanti esempi già pronti da copiare.		Questa pagina spiega come usare il Widget:Grafico 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 ==		== Parametri principali ==

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

2025-09-23T19:55:43Z

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

← Versione meno recente		Versione delle 21:55, 23 set 2025
Riga 1:		Riga 1:
	== Grafici con Chart.js su MediaWiki (Widget:Grafico) ==		== Grafici con Chart.js su MediaWiki (Widget:Grafico) ==

	Questa pagina spiega come usare il widget <~~code~~>{{#widget:Grafico}}</~~code~~> per creare grafici con Chart.js su MediaWiki. Trovi la sintassi di base, tutti i parametri supportati e tanti esempi già pronti da copiare.		Questa pagina spiega come usare il widget <pre>{{#widget:Grafico}}</pre> 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 ==		== Parametri principali ==

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

2025-09-23T19:54:56Z

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

← Versione meno recente		Versione delle 21:54, 23 set 2025
Riga 1:		Riga 1:
	== Grafici con Chart.js su MediaWiki (Widget:Grafico) ==		== Grafici con Chart.js su MediaWiki (Widget:Grafico) ==

	Questa pagina spiega come usare il widget {{#widget:Grafico}} per creare grafici con Chart.js su MediaWiki. Trovi la sintassi di base, tutti i parametri supportati e tanti esempi già pronti da copiare.		Questa pagina spiega come usare il widget <code>{{#widget:Grafico}}</code> 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 ==		== Parametri principali ==

Tostho: update

2025-09-23T19:23:09Z

update

Mostra modifiche

Tostho: creazione pagina

2025-09-22T22:23:59Z

creazione pagina

Nuova pagina

= Guida ai grafici su WikiLectio =

Su WikiLectio puoi inserire dei grafici interattivi usando il comando:

<pre>
{{#widget:Grafico ... }}
</pre>

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

---

== Sintassi base ==

Esempio minimo:

<pre>
{{#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
}}
</pre>

Risultato:

{{#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
}}

---

== Due serie: Domanda e Offerta ==

<pre>
{{#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
}}
</pre>

Risultato:

{{#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
}}

---

== Con punto di equilibrio ==

<pre>
{{#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
}}
</pre>

Risultato:

{{#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
}}

---

== Etichette testuali (es. mesi) ==

<pre>
{{#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 (€)
}}
</pre>

Risultato:

{{#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 (€)
}}

---

== Tre serie ==

<pre>
{{#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 (€)
}}
</pre>

Risultato:

{{#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 (€)
}}

---

== 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:

<pre>
{{#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
}}
</pre>

Risultato:

{{#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
}}

---

== 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.