MagyarmagyarKördiagram és fánkdiagram
Statisztikai adatok megjelenítése a Kördiagram widgettel, és a fánkdiagram beállítása a kivágás százalékával.
A Kördiagram widget arányokat mutat: minden „szelet” egy külön tétel. Jól jön például egy cég eredményeinek vagy egy felmérés megoszlásának bemutatására. Ugyanezzel a widgettel fánkdiagramot is készíthetsz.
A widget hozzáadása
Szekció neve “A widget hozzáadása”- Nyisd meg az oldalt az Elementorral.
- Az elemek panelén, a JetElements csoportban keresd meg a Kördiagram widgetet.
- Húzd a kívánt helyre. Az alapértelmezett diagramon három szelet van (Google, Facebook, Twitter).
A panelen a Diagram adatai szakasz tartalmazza a szeleteket, a Beállítások szakasz az általános tulajdonságokat.
A kész diagramon a jelmagyarázat felül, a cím alul látszik.
Diagram adatai
Szekció neve “Diagram adatai”Minden szelet külön tétel. Új szeletet az Elem hozzáadása gombbal veszel fel, a meglévőt a másolás és a törlés ikonnal duplikálhatod vagy távolíthatod el. A tételben három dolgot adsz meg:
- a szelet címkéjét (a jelmagyarázatban ez látszik),
- az értékét, amelyből a szelet mérete adódik,
- a színét.
A tétel alatt a diagram általános adatai állnak:
| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| Diagram címe | A teljes diagram címe, hogy a látogató tudja, mit mutat. Dinamikus értékkel is megadható. | Kördiagram |
| Cím HTML-címkéje | A cím HTML-elemének típusa (H1-H6, div, span, p). | H5 |
| Cím pozíciója | A cím a diagram előtt vagy után jelenik meg. | Diagram után |
Beállítások
Szekció neve “Beállítások”| Beállítás | Mit csinál |
|---|---|
| Diagram magassága | A diagram átmérőjét adja: a csúszkát jobbra húzva nő, balra húzva csökken. |
| Kivágás százaléka | Ha jobbra húzod, a kör közepe kivágódik, és a diagram fánkdiagrammá válik. |
| Időtartam | A megjelenéskor lejátszott animáció hossza. Minél nagyobb az érték, annál lassabb az animáció. |
| Easing | Az animáció lefutásának típusa (például linear, easeInQuad, easeOutBounce). |
| Méretezés animálása | Bekapcsolva a diagram a középpontból kifelé nő meg. |
A Jelmagyarázat blokk:
| Beállítás | Mit csinál |
|---|---|
| Megjelenítés | Megjeleníti vagy elrejti a jelmagyarázatot. |
| Pozíció | A jelmagyarázat helye: felül, alul, bal vagy jobb oldalon. |
| Igazítás | A jelmagyarázat igazítása: indítás, középre vagy vége. |
| Fordított sorrend | A jelmagyarázat tételei fordított sorrendben jelennek meg. |
Az Eszköztippek blokkban a Bekapcsolva kapcsolóval azt állíthatod be, hogy a diagram fölé mutatva felugró szöveg mutassa az értékeket. Az Utótag mezővel az értékek után tehetsz egy jelet (például a százalékjelet).
A diagram megjelenését a Stílus fülön finomíthatod. A változtatásokat a Frissítés gombbal mented.
Fánkdiagram készítése
Szekció neve “Fánkdiagram készítése”A fánkdiagram a kördiagram egyik megjelenése, külön widget nincs hozzá. Akkor érdemes használni, ha kevés kategóriát mutatsz, mert így az arányok egy pillantással olvashatók.
- Add hozzá a Kördiagram widgetet.
- A Diagram adatai szakaszban vegyél fel annyi tételt, amennyi szelet kell, és mindegyiknek add meg a címkéjét, az értékét és a színét.
- Add meg a diagram címét, és válaszd ki a pozícióját.
- A Beállítások szakaszban állítsd be a diagram magasságát, majd növeld a Kivágás százalékát, amíg a közepe ki nem nyílik.
- Állítsd be az animációt: az Időtartam, az Easing és a Méretezés animálása mezővel.
- A Jelmagyarázat blokkban döntsd el, látszik-e, hova kerül, és fordított sorrendben jelenik-e meg. Az Eszköztippek kapcsolóval a mutatóra felugró értékeket kapcsolhatod be.
- Szabd a megjelenést a Stílus fülön, majd kattints a Frissítés gombra.
Készült: