Share
Să presupunem că vizualizați o diagramă a coloanelor care afișează cifrele anuale de vânzări ale companiei dvs., unde fiecare coloană reprezintă un singur an. Dacă faceți clic pe o coloană, mergeți la un nivel profund pentru a vedea datele trimestriale. Acum, dacă faceți clic din nou, veți ajunge la cifrele de vânzări lunare.
Ceea ce faceți aici este gaurarea de la datele anuale la trimestriale până la datele lunare, utilizând un grafic de bază. Graficele de rulare vă permit să faceți clic pe panourile de date individuale pentru a dezvălui mai multe detalii despre aceasta (un grafic de date se referă la o coloană din tabelul de coloane, linii într-o diagramă de linie sau felii de plăcintă într-o diagramă plăcintă).
Șabloanele de rulare sunt foarte utile în rapoartele de afaceri și dashboards de analiză. Și în acest tutorial, voi încerca să acopere procesul pas cu pas de creare a unei diagrame cu ajutorul unei biblioteci grafice JavaScript a FusionCharts. Vom prelua datele prezente într-o bază de date MySQL folosind PHP, apoi vom folosi biblioteca de bază a FusionCharts și graficele sale PHP pentru a compune graficul.
Iată ce facem astăzi: (puteți vedea versiunea live aici sau puteți descărca codul sursă utilizând acest link).
Este o diagramă a coloanelor 2D cu două niveluri. Primul nivel conține date anuale de vânzări timp de 6 ani. Dacă faceți clic pe un an, veți putea vizualiza date trimestriale pentru acel an (al doilea nivel).
Am împărțit întregul proces în șapte pași:
Pentru a face diagrame în acest proiect, avem nevoie atât de biblioteca JS de bază a FusionCharts, cât și de pachetul PHP:
Accentsconagua
fusioncharts.js - vor fi incluse folosind HTML 2. Inițierea și validarea conexiunii DB
Odată ce am inclus toate dependențele, trebuie să inițiem conexiunea cu baza noastră de date pentru a prelua datele pentru diagramă.
Iată cum inițiem și validăm conexiunea bazei de date în PHP:
connect_error) exit ("A apărut o eroare la conexiunea dvs.:" $ dbhandle-> connect_error); ?> Pentru a stabili conexiunea cu baza de date MySQL, acești patru parametri ar trebui specificați:
- Adresa serverului în care este instalată baza de date. În cazul nostru, este
gazdă locală. - Numele de utilizator să se conecteze la baza de date. Valoarea implicită este
rădăcină. - Parola pentru numele de utilizator respectiv.
- Numele bazei de date sub care este creat tabelul.
$ dbhandle stabilește legătura cu baza de date. Am inclus valori fictive în fragmentul de cod de mai sus și va trebui să înlocuiți valorile pentru $ hostdb, $ userdb, $ passdb, și $ namedb cu valori reale pentru baza de date.
3. Preluarea datelor utilizând Query SQL
După ce conexiunea cu baza de date MySQL a fost stabilită cu succes, putem folosi mai jos interogarea SQL pentru a prelua datele pentru diagrama noastră:
// Interogare SQL pentru diagrama mamă $ strQuery = "SELECTĂ Year, Sales FROM year_sales"; // Executați interogarea sau returnați mesajul de eroare $ result = $ dbhandle-> ($ strQuery) sau ieșiți ("Cod de eroare ($ dbhandle-> errno): $ dbhandle-> error"); Dacă interogarea ($ strQuery) este executată cu succes, datele vor fi populate în $ rezultat.
4. Convertirea rezultatului interogării la JSON
Dacă ați urmat până acum toate etapele de mai sus, ar fi trebuit să fi preluat datele din interogare în $ rezultat variabil.
Pentru a forma datele JSON în format corect, vom crea o matrice asociativă - $ arrData - și împingeți toate atributele și datele de configurare a diagramei, așa cum se arată în codul de mai jos:
// dacă interogarea returnează un răspuns valid, pregătindu-se matricea JSON. dacă ($ rezultat) // '$ arrData' conține opțiunile și datele din diagramă. $ arrData = array ("diagramă" => array ("caption" => "Vânzări yoy - KFC", "xAxisName" => "An"; // crează un matrice pentru tabela parentală $ arrData ["data"] = array (); // arata datele ($ row = mysqli_fetch_array ($ result)) array_push ($ arrData ["data"], array ["Vânzări"], "link" => "newchart-json-" $ row ["Anul"])); Acest cod conține datele JSON pentru diagrama părinte. legătură atributul din datele JSON se referă la următoarea diagramă care trebuie redată, după ce se face clic pe graficul individual de date. Pentru o descriere mai detaliată, puteți vizita această pagină de documentație oficială.
5. Repetați pașii 3 și 4 pentru fiecare nivel de găurit
Pentru a trece la următorul nivel, trebuie să preluăm din nou datele utilizând variabila $ resultQuarterly din tabelul bazei de date respective (quarterly_sales). Acest lucru este similar cu ceea ce am făcut în pasul 3. Codul pentru același lucru este prezentat mai jos:
$ strQuarterly = "SELECT trimestru, vânzări, anul din quarterly_sales WHERE 1"; $ resultQuarterly = $ dbhandle-> interogare ($ strQuarterly) sau ieșire ("Cod de eroare ($ dbhandle-> errno): $ dbhandle-> error"); Matricea asociativă $ arrData este atașat cu datele din schema copilului pentru fiecare parcelă de date părinte, dar aici sunt date datele linkeddata . Codul pentru aceasta este prezentat mai jos, cu comentariile aferente:
// linkeddata este responsabil pentru hrănirea datelor și a opțiunilor grafice pentru diagramele copilului. $ arrData ["linkeddata"] = array (); $ i = 0; dacă ($ resultQuarterly) în timp ce ($ row = mysqli_fetch_array ($ resultQuarterly)) $ year = $ row ['Anul']; dacă este (isset ($ arrData ["linkeddata"] [$ i - 1]) && $ arrData ["linkeddata"] [$ i - 1] ["id"] == $ year) array_push "] [$ i-1] [" linkedchart "] [" data "], array (" label "=> $ row [" Quarter "]; altceva array_push ($ arrData ["linkeddata"], array ("id" => "$ year", "linkedchart" => array $ year "," xAxisName "=>" Quarter "," yAxisName "=>" Vânzări "," paletteColors "=>" D5555C "," baseFont " ), "data" => array (array ("label" => $ row ["Quarter"], "value" => $ row ["Sales"])))); $ I ++; Acum, avem matricea asociativă gata cu datele din variabila $ arrData și în final codificăm matricea în formatul nostru JSON folosind json_encode () metodă. Variabila $ jsonEncodedData pastreaza datele pentru graficul cu functia de descoperire.
$ jsonEncodedData = json_encode ($ arrData);
6. Crearea instanței diagramă și închiderea conexiunii DB
Un HTML este cel mai potrivit ca un container pentru graficul nostru și iată cum îl declarăm: Cartea minunată pe drum!
Ca următorul pas, vom crea instanța diagramă și vom transmite tipul diagramei, dimensiunile acesteia, idul containerului și alte detalii pentru a reda diagrama. Iată șablonul pentru crearea instanței FusionCharts:
// Sintaxă pentru instanță - noul FusionCharts ("tip de diagramă", "id grafic", "lățime diagramă", "înălțime diagramă", "div id pentru a face grafic", "tip de date", "date reale") Iată codul pentru a crea instanța FusionCharts (folosind șablonul de mai sus), a reda diagrama și a închide în cele din urmă conexiunea bazei de date:
// Crearea instanței FusionCharts $ columnChart = FusionCharts noi ("column2d", "myFirstChart", 600, 300, "linked-chart", "json", "$ jsonEncodedData"); // Metoda FusionCharts Render $ columnChart-> render (); // metoda Render // Închiderea conexiunii la baza de date $ dbhandle-> close (); Efectuarea graficelor dvs. arata mai bine
Dacă ați descărcat codul sursă pentru acest proiect, atunci trebuie să fi observat câțiva parametri diagramă array pe care nu am discutat mai sus. Acești parametri controlează aspectul și funcționalitatea unei diagrame și sunt denumiți în mod oficial ca atribute grafice.
Iată câteva explicații pe câteva atribute cheie pe care le-am folosit în codul meu:
-
canvasBgColor și bgcolor: puteți utiliza aceste două atribute pentru a controla culoarea de fundal a pânzei grafice și a containerului acesteia. -
BASEFONT: puteți utiliza acest atribut pentru a seta familia de fonturi pentru graficul dvs. Nu vă restricționați numai fonturile de sistem, dar puteți adăuga orice font. Pentru a utiliza un font personalizat, includeți fișierul sursă pentru acel font în HTML și setați-l utilizând BASEFONT atribut. Exemplul nostru folosește Open Sans din Google Fonts. -
plotToolText: afișarea informațiilor suplimentare despre hover este o modalitate excelentă de a îmbunătăți datele vizitați experiența și aici plotToolText vine în imagine. Acesta vă permite să personalizați sfat de ajutor pentru diagramă. Puteți utiliza codul HTML - și CSS personalizat pentru a personaliza tooltip-ul dvs. utilizând acest atribut. -
temă: acest atribut vă ajută să păstrați un design consistent în toate hărțile. Puteți defini cosmeticele dintr-un fișier într-un fișier și le puteți folosi temă atributul de a avea un design comun pentru toate graficele. Puteți afla mai multe despre aceasta pe pagina de documentare a managerului de teme. Există sute de atribute pe care le puteți utiliza pentru a vă personaliza graficul și este practic imposibil să descrieți totul în acest post. Deci, mai sus, am enumerat doar câteva dintre cele mai importante și pentru mai multe informații puteți vizita pagina atributelor diagramelor pentru diagramele coloanelor 2D.
Mai multe resurse
Am încercat să acoperim totul în detaliu mai sus, dar trebuie să vă confruntați cu provocări atunci când încercați să faceți acest lucru pe cont propriu sau doriți să luați acest concept în continuare. Deci, pentru a vă ajuta în călătoria dvs., iată câteva resurse importante:
- Documentație: pentru a afla mai multe despre graficele de rulare și implementarea acesteia, accesați pagina oficială a dezvoltatorului.
- PHP wrapper: dacă doriți să aflați mai multe despre ceea ce este posibil cu wrapper-ul FusionCharts, puteți să explorați pagina lor de diagrame PHP. Acesta conține multe exemple live cu cod complet.
Nu ezitați să postați întrebările / sugestiile dvs. în secțiunea de comentarii de mai jos. Întotdeauna mulțumit de chat și de ajutor!
