Divi 5 modulok: diagram

A Supreme Chart interaktív diagramokat jelenít meg a Divi 5 Visual Builderben. A szülő modul a diagram típusát, az adatforrást, a jelmagyarázatot, a tooltipeket és az animációt szabályozza. Minden Supreme Chart Item gyermek egy adathalmaz (sorozat), saját adatpontokkal (címke és érték). A modul a Divi Supreme kategóriában van, és előbb be kell kapcsolnod a Divi Supreme Pro → Modulok beállításai fülön. A builder feliratai angolul maradnak, ezért itt is úgy szerepelnek.

Mire jó: irányítópultok és jelentések (oszlop- és vonaldiagram több sorozattal), egyszerű arányok (fánk- és tortadiagram), élő mutatók Google Táblázatból, illetve bejegyzésekből épített sorozatok. Nagy elemző feladatra nem való: nagyjából 20 adathalmaz és sorozatonként 50 pont a felső határ, ennél nagyobb adathoz külön elemző eszköz kell. Térképhez és idővonalhoz másik modult használj.

Hozzáadás és első lépések

1. Nyisd meg az oldalt a Divi 5 Visual Builderben.
2. Szúrd be a Supreme Chart modult. Két induló adathalmazzal és mintahónapokkal érkezik, így azonnal egy csoportos oszlopdiagramot látsz.
3. A Content → Chart alatt a Chart Type alapból Bar, de másik típust is választhatsz.
4. Nyiss meg egy adathalmazt, add meg a Dataset Label értékét, és az Edit Data gombbal vegyél fel vagy szerkessz adatpontokat (címke és érték).
5. Opcionálisan állíts be Title címet a diagram fölé.
6. Opcionálisan az Data Source alatt a Manual helyett válaszd a Google Sheets vagy CSV URL forrást.
7. Mentsd el, és nézd meg az oldalt a nyilvános felületen.

Új sorozathoz az Add Dataset gomb való. Ha nincs adat, a diagram helyén ez az üzenet áll: „Add Datasets with Data Points (label + value) to display a chart.”

Diagramtípusok

Típus	Tudnivalók
Bar	Alapértelmezett. Az Orientation függőleges vagy vízszintes.
Line	Opcionális területkitöltés (Fill Area), görbület (Line Tension), pontstílus és pontméret.
Area	Vonaldiagram kitöltött sorozattal. A Line Tension és a Stacked itt is érvényes.
Pie, Doughnut, Polar Area	Minden adathalmaz egy koncentrikus gyűrű, a szeletek címkéi az első adathalmazból jönnek. Pontonként megadható szín. A Doughnutnál állítható a kivágás (Cutout).
Radar	A kategóriacímkék az első adathalmazból jönnek, több adathalmaz is használható.
Scatter	A címke az X, az érték az Y. Kategóriacímkék nincsenek.
Bubble	A címke az X, az érték az Y, a Radius a buborék mérete (üresen a szülő Point Radius értéke).

Adatok megadása

Kézi adat

1. A Content fülön az Data Source legyen Manual.
2. Vegyél fel egy adathalmazt minden sorozathoz (Add Dataset).
3. Adathalmazonként add meg a Dataset Label nevet és a színeket, majd az Edit Data felületen vedd fel, rendezd és szerkeszd az adatpontokat.

CSV-import (csak kézi adatforrásnál)

Az Import data részben:

1. Töltsd le a mintát, vagy használd a saját CSV-det. Az alak: az első oszlop fejléce label vagy category, a többi oszlop a sorozatok neve, a sorok a kategóriák.
2. Válaszd ki a CSV fájlt, vagy másold be a tartalmát (Or paste CSV).
3. A Validate & preview egy előnézetet mutat a vásznon (ez még nincs érvényesítve).
4. A Confirm replace felülírja az adathalmazokat.

A színek nem kerülnek be az importba, az azonos nevű sorozatok megtartják a meglévő színüket. A CSV csak számokat és sima szöveget tartalmazhat, dinamikus tartalmat nem.

Google Táblázat vagy CSV URL

1. Állítsd az Data Source értékét Google Sheets vagy CSV URL értékre.
2. Illeszd be az URL-t. Táblázatnál közzétett CSV kell: Fájl → Megosztás → Közzététel az internetre → CSV, külön lapfülhöz a gid= paraméterrel. Privát táblázat nem támogatott, és a sima megosztási link sem elég.
3. A Fetch & preview után a Confirm replace hozza létre az alap adathalmazokat.
4. Opcionálisan kapcsold be a Live refresh beállítást, és válaszd ki a Refresh interval értékét (5, 15, 30 vagy 60 perc, alapból 15). A nyilvános oldal ekkor időközönként újratölti az értékeket, a színek és stílusok az adathalmazokon maradnak. A szerveroldali gyorsítótár legalább 5 percig tart, a builderben a Refresh now megkerüli. Új sorozat felvételéhez újra kell Confirm replace-t futtatni.

Jelmagyarázat, tooltip, animáció, adatösszegzés

• Show Legend: jelmagyarázat, helye és igazítása állítható, sorrendje megfordítható.
• Show Tooltips: tooltip egérrel fölé érve, és az interakciós módok.
• Animáció: időtartam, lassulás görbe, késleltetés, opcionális ismétlés.
• Show Data Summary: az adatok táblázata a diagram alatt, láthatóan vagy csak képernyőolvasónak. Az oszlopfejlécek (Series / Label / Value) átnevezhetők. Fontos diagramnál az akadálymentesség miatt érdemes bekapcsolni.

Szülő: Content

Beállítás	Mit csinál	Alapérték
Data Source	Manual, Google Sheets vagy CSV URL.	manual
Google Sheets CSV URL / CSV URL	A távoli CSV címe.
Live refresh	A nyilvános oldal időközönként újratölti a távoli CSV-t.	ki
Refresh interval	5, 15, 30 vagy 60 perc.	15
Title	A diagram fölötti cím.
Chart Type	Bar, Line, Area, Pie, Doughnut, Radar, Polar Area, Scatter, Bubble.	bar
Orientation	Csak oszlopdiagramnál: függőleges vagy vízszintes.	vertical
Chart Height	A tároló magassága (120 és 800 px között).	320px
Responsive	A diagram átméretezése az ablakkal.	be
Maintain Aspect Ratio	Ki: a Chart Height szabja meg a tároló méretét.	ki
Border Width	Az alap sorozatszegély vastagsága.	1
Cutout	A fánkdiagram lyukának mérete.	50%
Circumference	A torta- és fánkdiagram ívhossza.	360
Rotation	A torta- és fánkdiagram kezdőszöge.	0
Point Style	Pont alakja: Circle, Cross, Cross Rotated, Dash, Line, Rectangle, Rectangle Rounded, Rectangle Rotated, Star, Triangle, None.	circle
Begin at Zero	A skála nullától indul (torta és fánk esetén rejtve).	be
Stacked	Az oszlop-, vonal- és területsorozatok egymásra rakódnak.	ki
Fill Area	Kitöltés a vonal- és radardiagram alatt (a területdiagram mindig kitöltött).	ki
Line Tension	A vonal-, terület- és radardiagram görbülete.	0,3
Point Radius, Point Style	A pontok mérete és alakja vonal-, terület-, radar-, scatter- és bubble diagramnál.	3, circle
Show Data Summary	Táblázat a diagram alatt.	ki
Summary Style	Látható vagy csak képernyőolvasónak szóló.	visible
Show Legend	Jelmagyarázat.	be
Legend Position, Legend Align	A jelmagyarázat helye és igazítása.	top, center
Reverse Legend	Fordított sorrend.	ki
Show Tooltips	Tooltip egérrel fölé érve.	be
Tooltip Mode, Intersect	A tooltip viselkedése.	nearest, be
Interaction Mode	Az egeres interakció módja.	nearest
Animate	Bemutatkozó animáció.	be
Duration (ms)	Az animáció hossza.	1000
Easing	Az animáció gyorsulási görbéje.	easeOutQuart
Delay (ms), Loop Animation	Késleltetés és ismétlés.	0, ki

Szülő: Design

Beállítás	Mit csinál	Alapérték
Title Font	A diagram fölötti cím betűtípusa.
Legend Font	A jelmagyarázat betűtípusa.	12px, #666666
Show X/Y Grid	Rácsvonalak (radar és polar esetén szög és sugár).	be
Grid Color, Tick Color	A rács és a skálajelek színe.	rgba(0,0,0,0.1), #666666
Chart Color, Border Color	Az alap sorozatszínek, ha az adathalmazon nincs szín.	beépített paletta
Border Radius	Az oszlopok sarkának lekerekítése.	0
Hover Background / Border Color / Width	Az alap hover stílus.
Data Summary	Az összegző táblázat betűi, háttere, térközei és szegélyei (fejléc és sorok külön fülön, páros és páratlan sor háttere külön).

Az alap sorozatpaletta lila, kék, rózsaszín, narancs, zöld és sárga tónusokat tartalmaz.

Adathalmaz (Supreme Chart Item)

Az adathalmaz a szülőből az Add Dataset gombbal vehető fel, önállóan nem tehető az oldalra.

Beállítás	Mit csinál
Dataset Label	A sorozat neve a jelmagyarázatban. Legyen rövid.
Chart Color	A sorozat kitöltése. Üresen a szülő, majd a paletta színe.
Border Color	A sorozat szegélye. Torta- és fánkdiagramnál üresen fehér.
Border Width	A szegély vastagsága, üresen a szülő értéke.
Data Points	Kis előnézet. Az Edit Data nyitja a szerkesztőt, ahol felveheted, rendezheted és szerkesztheted a pontokat.
Label / X	Kategóriacímke vagy numerikus X érték (dinamikus tartalom is lehet).
Value / Y	Szám vagy Y érték (dinamikus tartalom is lehet).
Radius	Bubble diagramnál a buborék mérete.
Color	Torta-, fánk- és polar diagramnál szeletenkénti szín. Üresen az adathalmaz színe.
Admin Label	A builder listában látható név.

A Design → Dataset Style alatt: Hover Background Color, Hover Border Color, Hover Border Width, Border Radius. Üresen a szülő diagram értékei érvényesek.

Ha nincs adatpont, ezt az üzenetet látod: „No data points yet. Click Edit Data to add points.” A felvétel, a rendezés és a dinamikus tartalom kötése az Edit Data felületen történik, az oldalsó lista csak előnézet. Torta jellegű diagramoknál a közös szeletcímkéket az első adathalmazra írd.

Tippek

• Összesítésnél ne a Chart szülőt tedd Divi Loopba. A Loop az adathalmazon (Chart Item) legyen bekapcsolva, a Dataset Label és az adatpontmezők pedig dinamikus tartalommal legyenek kötve.
• CSV-importnál a Confirm replace után nézd át a színeket, mert csak az azonos nevű sorozatok őrzik meg az előzőt.
• Régi, Divi 4-es diagramból átalakítva a kategórialisták és a vesszővel elválasztott értékek az adatpontok mellett továbbra is működnek, ezért az átalakítás után ellenőrizd az adatokat.
• Az első 20 adathalmaz számít, és a teljesítmény miatt tartsd mérsékelt számon a pontokat.