Hogyan készíts egy szép grafikont a webhelyedre a jquery és xchart használatával
Voltál valaha Egyiptomban? Láttad a piramisokat? Nem voltam, de nagyon szeretem őket. A kőtömbök rendezett szerkezete, a csúcsra csúsztatva, egy sor 3-as állványon, önkéntelenül hasonlít egy grafikonra vagy egy diagramra, nem? Ma szeretném elmondani kedves barátaidnak, hogy egy szemet gyönyörködtető grafikont vagy diagramot csinálj, ha annyira tetszik.
A diagramok kiváló eszköz az adatok vizualizálásához. Milyen modern adminisztrátor panel nélkülük van? Gondolod, hogy nehéz ezeket megvalósítani? Nem, nem ma. Több fontos dolgot kell tenned, mint a diagramok manuális létrehozása, ezért nagyon jó és egyszerű JQuery xCharts könyvtárat használunk. A dátumtartomány kiválasztásához egy naptárra is szükségünk van. Egy nagyon aranyos és egyszerű daterange eszközt fogunk használni. Mindez csak pár lépésben teszi majd meg a diagramunk elkészítését. A diagramot aszinkron módon generáljuk az Ajax alkalmazásával, és az adatokat a MySql adatbázisból vesszük.
Csak meg kell adnunk a dátum kiválasztásának elemeit (dátumbeviteli űrlapot és naptárképet), és még egy figurális elemet a diagram inicializálására, ez minden.
Amint láthatja, nagyon sok külső forrást kapcsoltunk össze, de a kis méret miatt nagyon gyorsan betöltődnek. Így a fejrészben összekapcsoltuk az xchart és a datepicker plugin stílusát, a bootstrap stílust (jön a cloudflare, a szupergyors cdn) és végül a style.css oldal stílusa.
Zárás előtt a tag szervezet, mi is a jQuery könyvtár, d3.js (szükséges xcharts), sőt ő xcharts, elegáns sugar.js (ki kell választania a dátum tartomány), naptár (daterangepicker) és a script script.js.
A munkánk eredménye, lásd alább.
Lépjünk át a MySQL-re
Ahogy kezdetben azt mondtam, az adatok a diagram megjelenítéséhez a képernyőn fogunk venni a MySql táblából. Az SQL kód megtalálásával létrehozhatja a szükséges táblázatot a schema.sql fájlban, hogy letöltse a mintaarchívumot, ahol ez a fájl található, kattintson az oldal tetején található "Letöltés" ikonra.
Megjegyzés: minden munkához ne felejtsen el két dolgot:
1) adja meg a MySql adatbázis beállításait a setup.php fájlban;
2) Importálja a schema.sql fájlt a kiválasztott adatbázisba és hozzon létre egy szükséges táblát.
PHP szkriptünk egyszerűen kiválasztja a MySql adatbázisból származó adatokat, amelyek megfelelnek a megadott időintervallumnak, összegyűjtik őket egy tömbbe, és elküldi JSON-nak.
Ebben a szkriptben az egyik kedvenc könyvtárat használtam - a Idiormot. Ezt korábban használtam (sok órámban és személyes projektekben). A könyvtár az egyetlen fájl (a lib / könyvtárban található), és egyszerűen dolgozik az adatbázisokkal. Csak annyit tettem, hogy az eredményeket a kiválasztott dátumtartományba illeszti. Ennek eredményeként a JSON válasz így fog kinézni:
A JSON válasz, egy pár tömb, a címke tartalmazza azt a dátumot, amelyet a MySql adatbázisból vettem, és az adott nap értékesítésének értékét. Ezt a választ az xCharts plug-in használata előtt meg kell adnunk, különben nem fog működni, mert nem tudjuk megadni neki a szükséges adatokat.
Először több változót hozunk létre, amelyek a daterangepicker plugin dátumtartományát tárolják. Ne feledje, hogy a dátumtartomány a cukor.js bővítmény Dátum módja segítségével kerül kialakításra. Úgy döntöttem, hogy így megyek, mert a szokásos módszer az xChartokkal ütközhet.
Amint láthatja, gyakran használom a cukor.js plugin dátumának és idejének kezelésére szolgáló módszereket, hogy meg lehessen határozni a kezdeti és természetesen a tartomány pontját. Ezt követően a parancsfájlt az elmúlt 7 nap eredményeihez inicializálom, és frissítem a mezőt a dátum bevitelére.
Tegyen szöveges jelölőket a diagramunkra:
Végül aszinkron kérést nyújtunk PHP szkriptünknek az adatok lekéréséhez:
Az xChart könnyen megváltoztathatja a diagram stílusát a setData módszerrel, ezért ha nem elégedett ezzel a nézettel, megadhatja a sajátját. Az attribútum className a plugin fontos része, egy grafikon definiálására szolgál, így nem szükséges kihagyni, hogy ne legyen hiba (hidd el).
A fenti lépések végrehajtása után a pluginunk teljesnek tekinthető.
Hurrá, megcsináltuk!
Ui Ezt a példát használhatja az adminisztrátor panel láthatóságának növelésére, valamint statikus adatok megjelenítésére a vizuális grafikonon.
Az anyag külföldi forrásból származik. És csak tájékoztató jellegű.
Reprint szabályok
Tisztelt látogató!
Az alábbiakban olvashatók a weboldal anyagainak felhasználási feltételei és újranyomtatása,
Az oldalon található összes anyagot személyesen készítem el nekem.