Diagram létrehozása

A diagramszerkesztő fülei: általános beállítások, diagramtípus, oszlopok, beállítások és stílus.

Új diagramot a JetEngine → Charts Builder → Új hozzáadása gombbal készíthetsz. A szerkesztő bal oldalán öt fül áll: Általános beállítások, Chart Type, Oszlopok, Chart Config és Chart Styles. A jobb oldali Create Chart gomb menti a diagramot.

A szerkesztő alján a Reload Preview gomb rajzolja újra az előnézetet. Amíg nincs lekérdezés, diagramtípus és legalább egy oszlop megadva, az előnézet helyén egy ellenőrzőlista mutatja, mi hiányzik.

Általános beállítások

Beállítás	Mit csinál
Név	A diagram neve. Ez jelenik meg a listában és a diagram kiválasztásakor.
Data Query	A diagram adatforrása: egy korábban a Lekérdezéskészítővel létrehozott lekérdezés. A lista alatti hivatkozásokkal a kiválasztott lekérdezést szerkesztheted, vagy újat hozhatsz létre.
Fetch Data	Lekér egy adatmintát a lekérdezésből, hogy a szerkesztő megismerje az elérhető oszlopokat. A gomb utána Re-fetch Data feliratú.

A kiválasztott lekérdezés a diagram beállításai között

A lekérdezést mindig a diagram elkészítése előtt hozd létre. A Re-fetch Data nem működik WooCommerce-lekérdezéssel.

Ha kevesebb elemet szeretnél a diagramon, a lekérdezés Lapozás (Pagination) beállításában add meg a Limit értékét. Ez azt határozza meg, hány elemet ad vissza a lekérdezés egy oldalon, ezért a diagram is csak ennyit rajzol ki.

Chart Type

Ezen a fülön a diagram típusát választod ki. Az elérhető típusok:

Típus	Felirat a felületen
Vízszintes sávdiagram	Bar
Vonaldiagram	Line
Területdiagram	Area
Kördiagram	Pie
Fánkdiagram	Donut
Buborékdiagram	Bubble
Lépcsős területdiagram	Stepped Area
Gyertyadiagram	Candlestick
Hisztogram	Histogram
Oszlopdiagram	Oszlopok
Pontdiagram	Scatter
Térképdiagram	Geo

Oszlopok

Az Oszlopok fülön adod meg, milyen adatokat rajzoljon a diagram. Az oszlopok a metamezőkhöz hasonlóan működnek. Az első oszlop adja a diagram csoportcímkéit (például az x tengely feliratait), a további oszlopok pedig az ábrázolt adatsorokat.

Új oszlopot a New column gombbal veszel fel. Egy oszlop beállításai:

Beállítás	Mit csinál
Column Name	Az oszlop neve. A táblázat fejlécében és a jelmagyarázatban jelenik meg.
Adatforrás	Honnan jöjjön az oszlop adata: Fetched Column (a lekért mintában talált oszlop), Post/Term/User/Object Field vagy Meta mező.
Select Field	A kiválasztott forrás mezője. A Post/Term/User/Object Field forrásnál a bejegyzés, kifejezés, felhasználó vagy más objektum beépített mezői közül választasz (például Cím). A Meta mező forrásnál a JetEngine metamezői közül.
Egyéni mező kulcsa	Csak a Meta mező forrásnál: tetszőleges egyéni mező kulcsát is megadhatod, ha az nem szerepel a listában.
Filter Column Output	Alapból ki van kapcsolva. Bekapcsolva egy visszahívási függvénnyel (Filter Callback) átalakíthatod az oszlop értékét, például egy dátum formátumát.
Adattípus	Az oszlop értékeit a megadott típusra alakítja: Alapértelmezett, Ensure number, Ensure string vagy Ensure date.

Az első oszlopnál a példában a bejegyzés címét választottuk. A metamezős oszlopnál az Egyéni mező kulcsa mezőbe írtuk a mező kulcsát:

Ha az oszlopok készen vannak, a Reload Preview gombbal rajzold ki a diagramot. Az előnézethez a Chart Styles fülön meg kell adni a szélességet.

Chart Config

A fül a diagram megjelenését és működését szabályozza.

Beállítás	Mit csinál
Legend	A jelmagyarázat helye: a diagramtól jobbra, alatta, balra, a diagramon belül a bal felső sarokban, fölötte, vagy egyáltalán nem jelenik meg.
Is Stacked	Az elemeket egymásra halmozva (oszlopokban összegezve) jeleníti meg.
Advanced Options	Alapból ki van kapcsolva. Bekapcsolva megjelenik a Set Advanced Options mező, ahol JSON formátumban további beállításokat adhatsz meg.

Haladó beállítások JSON-nal

A Set Advanced Options mezőbe a diagramtípushoz tartozó konfigurációs beállítások írhatók JSON formátumban. A diagramokat a Google Charts rajzolja, ezért annak oszlopdiagram-beállításai használhatók. Például fehér háttér, keret és animáció:

{
  "backgroundColor": {
    "fill": "#FFF",
    "strokeWidth": 5
  },
  "animation": {
    "duration": 3000,
    "easing": "linear",
    "startup": true
  }
}

Animációt csak a haladó beállításokkal lehet kérni, a nélkül a diagram nem animált.

Chart Styles

Beállítás	Mit csinál
Szélesség	A diagram vászon szélessége pixelben.
Magasság	A diagram vászon magassága pixelben.

Az előnézet akkor rajzolódik ki, ha a szélesség meg van adva.

Mentés és előnézet

Kattints a Reload Preview gombra, és ellenőrizd az előnézetet. Ha minden rendben van, a Create Chart gombbal mentsd a diagramot.

Az előnézeten a termékek ára és akciós ára oszloppárokban látszik, a jelmagyarázat a diagram alatt áll.

Készült: 2026. november 1.