# Kö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

1. Nyisd meg az oldalt az Elementorral.
2. Az elemek panelén, a **JetElements** csoportban keresd meg a **Kördiagram** widgetet.
3. Húzd a kívánt helyre. Az alapértelmezett diagramon három szelet van (Google, Facebook, Twitter).

![A Kördiagram widget szerkesztőpanelje a Diagram adatai és a Beállítások szakasszal](./kepek/diagramok-es-idovonalak-kordiagram-panel.webp)

*A Kördiagram widget szerkesztőpanelje a Diagram adatai és a Beállítások szakasszal* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A panelen a **Diagram adatai** szakasz tartalmazza a szeleteket, a **Beállítások** szakasz az általános tulajdonságokat.

![Az alapértelmezett kördiagram a jelmagyarázattal és a címmel](./kepek/diagramok-es-idovonalak-kordiagram.webp)

*Az alapértelmezett kördiagram a jelmagyarázattal és a címmel* (https://minta-bolt.hu/widget-teszt-2/)

A kész diagramon a jelmagyarázat felül, a cím alul látszik.

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

| 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

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.

1. Add hozzá a **Kördiagram** widgetet.
2. 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.
3. Add meg a diagram címét, és válaszd ki a pozícióját.
4. 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.
5. Állítsd be az animációt: az **Időtartam**, az **Easing** és a **Méretezés animálása** mezővel.
6. 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.
7. Szabd a megjelenést a **Stílus** fülön, majd kattints a **Frissítés** gombra.