Diagram (Chart) widget

A Chart widget (az Elementor panelén Diagram) interaktív diagramot rajzol az oldalra. Hat diagramtípust tud: vonal, oszlop, radar, gyűrű és kör, poláris terület és buborék. Az adatot kézzel is megadhatod, de beolvashatod CSV-fájlból vagy Google Sheetből is.

A widget a Pro bővítményben van, ezért a The Plus Addons for Elementor Pro aktív kell legyen. Használat előtt kapcsold be: The Plus Addons → Widgets, keress rá a Chart szóra, és kapcsold be a kapcsolóját.

Oszlopdiagram a nyilvános oldalon, jelmagyarázattal és tengelyekkel

A kép egy kész oszlopdiagramot mutat: a megadott adatokból valódi, interaktív diagram lesz tengelyekkel és jelmagyarázattal.

Elrendezés

A widget Tartalom fülén az Elrendezés szakasz a diagram forrását és típusát állítja.

Beállítás	Mit csinál	Alapérték
Diagramtípus	Az adatok forrása: Egyéni (kézi megadás), CSV-fájl vagy Google Sheet	Egyéni
Diagram kiválasztása	A diagram alakja: vonal, oszlop, radar, gyűrű és kör, poláris terület, buborék (képes választó)	Vonal
Tájolás	Oszlopdiagramnál Függőleges oszlop vagy Vízszintes sáv; gyűrű és kör típusnál Kördiagram vagy Fánkdiagram	Függőleges oszlop, illetve Kördiagram
Címke értéke	A tengely vagy az adatpontok címkéi, a `	` jellel elválasztva (csak kézi adatnál)

Az egyes típusoknál a Hogyan működik felirat melletti súgó ikon az adott típus leírására visz.

Adatok kézi megadása

Az Egyéni forrásnál az adatokat az Adatkészlet szakaszban adod meg. Ez a vonal-, oszlop- és radardiagramnál egy lista, az Elem hozzáadása gombbal további adatsort vehetsz fel.

Egy adatsor főbb mezői:

Mező	Mit csinál
Címke	Az adatsor neve (ez jelenik meg a jelmagyarázatban)
Adatok	Az adatsor értékei, a `

Az adatsor további beállításai a pontok és vonalak színezésére valók: Többféle háttérszín adatpontonként, Pont háttérszíne, Többféle szegélyszín, Pont kerete, Kitöltés és Szaggatott keret.

A gyűrű- és kördiagramnál, valamint a poláris területdiagramnál nincs adatsorlista: egyetlen Adatok mező van (alapértéke 10 | 15 | 20), mellette a Háttérszínek és a Szegélyszínek mező. Ide a színeket szintén | jellel elválasztva írd, például #f7d78299|#6fc78499|#8072fc99.

Diagramtípusok lépésről lépésre

Mind a hat típusnál ugyanúgy indulsz: add hozzá a Chart widgetet az oldalhoz, a Diagramtípus maradjon Egyéni, majd a Diagram kiválasztása résznél válaszd ki a típust. A Címke értéke mezőbe a címkéket | jellel elválasztva írd, az adatokat pedig az Adatkészlet szakaszban add meg. A típusok közti eltérés az adatmezőkben és a Tájolás listában van.

Oszlopdiagram és vízszintes sávdiagram

A Diagram kiválasztása résznél válaszd az oszlop ikont.
A Tájolás listából válaszd a Függőleges oszlop vagy a Vízszintes sáv értéket.
A Címke értéke mezőbe írd a tengely címkéit, például Jan | Feb | Már.
Az Adatkészlet szakaszban add meg az adatsor Címkéjét és az Adatok mezőben az értékeket, például 25 | 15 | 30.

Vízszintes sávdiagram a nyilvános oldalon

A kép a Vízszintes sáv tájolást mutatja: a címkék a függőleges tengelyen, az értékek a vízszintesen futnak. A diagram az adatokból valódi, interaktív diagram, a sávok az értékekkel arányosak.

Kördiagram és fánkdiagram

A Diagram kiválasztása résznél válaszd a Gyűrű- és kördiagram ikont.
A Tájolás listából válaszd a Kördiagram vagy a Fánkdiagram értéket.
A Címke értéke mezőbe írd a cikkelyek címkéit.
Kördiagramnál az Adatok mezőbe írd az értékeket, a Háttérszínek és a Szegélyszínek mezőbe a cikkelyenkénti színeket, mind | jellel elválasztva.
Fánkdiagramnál az Adatkészlet szakasz listáját töltsd ki: minden listaelem egy gyűrű a diagramban, saját Címkével, Adatokkal és színekkel. Az alapértelmezett lista három gyűrűt rajzol, ezért ha csak egy gyűrű kell, töröld a többi elemet.

Kördiagramnál minden érték egy cikkely, a méretük az értékek arányát követi.

Fánkdiagramnál a közepe üres, és minden Adatkészlet elem külön gyűrűt kap.

Radardiagram

A radardiagram (más néven pók- vagy hálódiagram) több értéket mutat körkörös elrendezésben, ezért változók összehasonlítására jó.

A Diagram kiválasztása résznél válaszd a radar ikont.
A Címke értéke mezőbe írd a tengelyek nevét, | jellel elválasztva.
Az Adatkészlet szakaszban add meg az adatsor Címkéjét és az Adatok mezőben az értékeket. Annyi értéket írj, ahány címkét megadtál.

Poláris területdiagram

A poláris területdiagram a radardiagramhoz hasonlóan körkörös, de kitöltött, az értékekkel arányos szeletekből áll.

A Diagram kiválasztása résznél válaszd a poláris terület ikont.
A Címke értéke mezőbe írd a szeletek címkéit, | jellel elválasztva.
Az Adatok mezőbe írd az értékeket, a Háttérszínek mezőbe pedig a szeletek színeit.

Speciális opció és egyéb opció

A Speciális opció szakasz a diagram megjelenését finomítja.

Oszlop mérete és Oszlopköz: az oszlopok szélessége és a köztük lévő hely (oszlopdiagramnál).
Rácsvonalak: a rácsvonalak be- és kikapcsolása, az X- és Y-tengely rácsvonalainak színe, a nullavonal színe, a keret rajzolása és a Kezdés nullánál kapcsoló. Ha ez ki van kapcsolva, a tengely nem feltétlenül nullánál kezdődik, ahogy a fenti oszlopdiagramon is látszik.
Címke: a címkék megjelenítése, színe és mérete.
Jelmagyarázat: megjelenítés, szín, pozíció, igazítás és méret.
Eszköztipp: a rámutatáskor megjelenő buborék, az esemény, a betűméret, a cím, a törzsszöveg és a háttér színe, valamint a Sima kapcsoló.
Képarány és Képarány megtartása: a diagram arányainak rögzítése.
Vonal-, radar- és buborékdiagramnál Egyéni pontstílusok: pontstílus, pont háttere, normál és rámutatáskori mérete, kerete és annak szélessége.

Az Egyéb opció szakasz az Animáció listát (a megjelenési animáció lefutása, alapértéke easeOutQuart) és az Időtartam mezőt adja. A Stílus fülön a Grafikonstílus szakasz a szélességet, a magasságot és az igazítást állítja.

Diagram CSV-fájlból

Ha az adataid már CSV-fájlban vannak, a widget közvetlenül beolvassa.

Győződj meg róla, hogy a CSV-fájl oszlopelválasztója pontosvessző (;), nem vessző. Ha nem az, előbb alakítsd át.
Töltsd fel a fájlt a Média → Új médiafájl hozzáadása oldalon, és másold ki az URL-jét.
Add hozzá a Chart widgetet az oldalhoz.
A Diagramtípus listából válaszd a CSV-fájl lehetőséget.
Az Add meg a CSV-fájl URL-jét mezőbe illeszd be a fájl címét.
A Diagram kiválasztása résznél válaszd ki a diagram alakját.

Fontos: a pontosvesszős elválasztó kötelező, a vesszővel elválasztott szabványos CSV nem olvasódik be helyesen.

Diagram Google Sheetből

Ha az adatok Google Sheetben vannak, nem kell újra begépelned őket.

A Google Sheetsben tedd közzé a táblázatot a weben (Fájl → Megosztás → Közzététel a weben), hogy bejelentkezés nélkül is elérhető legyen.
Add hozzá a Chart widgetet az oldalhoz.
A Diagramtípus listából válaszd a Google Sheet lehetőséget.
Az API-kulcs mezőbe írd be a Google API-kulcsodat.
A Táblázat ID-ja mezőbe másold be a táblázat azonosítóját: ez a címben a /d/ és az /edit közötti hosszú karaktersor.
A Táblázattartomány mezőbe írd be a diagramra szánt cellatartományt, például A1:B10.
A Diagram kiválasztása résznél válaszd ki a diagram alakját.

A táblázatnak közzé kell lenni téve a weben: egy privát, csak megosztási linkkel elérhető táblázat nem töltődik be.

Buborékdiagram

A buborékdiagram három értéket mutat egyszerre: két tengelyen a pont helyét, és a buborék méretét.

Add hozzá a Chart widgetet, a Diagramtípus maradjon Egyéni.
A Diagram kiválasztása résznél válaszd a buborék ikont (Buborék).
Nyisd meg az Adatkészletek szakaszt, és adj meg egy Címkét.
Az Adatok mezőbe pontonként három értéket írj szögletes zárójelben, | jellel elválasztva: [x|y|méret]. Több pontot egymás után írhatsz, például [5|15|15][10|18|12][7|14|14] (ez az alapérték).

Az első szám a pont vízszintes, a második a függőleges helye, a harmadik a buborék mérete.

A buborékok a megadott x|y helyen jelennek meg, a méretük a harmadik számtól függ.

Készült: 2026. november 2.