# Vonaldiagram

> Idősoros és összehasonlító adatok megjelenítése a Vonaldiagram widgettel: bekapcsolás, adatsorok, tengelyek és beállítások.

A **Vonaldiagram** (a panelen a neve egyelőre **Line Chart**) adatsorokat mutat vonalakkal. Bárhová elhelyezheted az oldalon.

## A widget bekapcsolása

Ellenőrizd, hogy a widget be van-e kapcsolva: **Crocoblock → JetPlugins Settings → JetElements → Widgets & Extensions**, itt a **Line Chart** kapcsolónak aktívnak kell lennie.

## A widget hozzáadása

1. Nyisd meg az oldalt vagy a sablont az Elementorral.
2. Keresd meg a widgetet az elemek panelén, és húzd az oldalra.
3. A widget demóadatokkal jelenik meg. Kattints rá, hogy megnyíljon a beállítópanel.

![A Vonaldiagram widget szerkesztőpanelje](./kepek/diagramok-es-idovonalak-vonaldiagram-panel.webp)

*A Vonaldiagram widget szerkesztőpanelje* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

![Az alapértelmezett vonaldiagram három adatsorral](./kepek/diagramok-es-idovonalak-vonaldiagram.webp)

*Az alapértelmezett vonaldiagram három adatsorral* (https://minta-bolt.hu/widget-teszt-2/)

Az alapdiagramon három adatsor van három időponttal (március, április, május).

## Diagram adatai

| Beállítás | Mit csinál |
| --- | --- |
| **Feliratok** | Az x tengely pontjainak nevei, vesszővel elválasztva. |
| **Skála tengelyének legnagyobb értéke** | Az y tengely legnagyobb értéke. Ha egy adat ennél nagyobb, a vonal kilóg a keretből, és nem látszik. |
| **Skála tengelyének legkisebb értéke** | Az y tengely legkisebb értéke. Ha egy adat ennél kisebb, a vonal nem látszik. |
| **Lépésköz** | Az y tengely pontjai közötti távolság. Ha a legnagyobb érték 100, a lépésköz 20, a tengelyen öt pont lesz. |
| **JetEngine-lekérdezés használata** | Csak akkor látszik, ha a JetEngine aktív. Bekapcsolva a Query Builderrel készített lekérdezés adja a tartalmat (a **Lekérdezés kiválasztása** mezőben). |

Minden adatsor egy tétel a **Diagram adatai** listában. Annyit vehetsz fel, amennyi kell (az **Elem hozzáadása** gombbal), és mindet törölheted egy kivételével. A tételnek két füle van:

- **Tartalom**: a **Címke** az adatsor neve. Az y tengely értékeit az **Adatok** mezőbe írd. Az értékek száma egyezzen a **Feliratok** számával, mert a fölös értékek nem látszanak.
- **Stílus**: a háttér, a pontok és a keret színe.

## Beállítások

| Beállítás | Mit csinál |
| --- | --- |
| **Diagram magassága** | Alapból a szakasz magassága; csúszkával vagy pixelben módosítható. |
| **Rácsvonalak** és **Feliratok** | A rácsvonalak és a tengelyfeliratok ki-be kapcsolása. Ha minimalista megjelenést szeretnél, kapcsold ki őket, így csak az adatvonalak maradnak. |
| **Comparison** (**Megjelenítés**) | Bekapcsolva az eszköztipp az előző értéket is mutatja az aktuális mellett. |
| **Jelmagyarázat** | A **Megjelenítés** kapcsoló mellett megadható a **Pozíció** és az **Igazítás**, a **Fordított sorrend** pedig fordított sorrendben jeleníti meg az adatsorokat. |
| **Előtag** | Az eszköztippek értéke előtt megjelenő jel. |
| **Utótag** | Az eszköztippek értéke után megjelenő jel. |
| **Thousand Separator** | Az eszköztippekben használt ezres elválasztó. |

A megjelenést a **Stílus** fülön szabhatod. Mentsd a **Frissítés** gombbal, és nézd meg az oldalt.