Un tutorial despre detalierea FusionCharts în jQuery

Publicat: 2022-03-11

Vizualizarea datelor le face mai ușor de citit

Atunci când se ocupă de analiza datelor, majoritatea companiilor se bazează pe MS Excel sau Google Sheets. Deși acestea sunt instrumente puternice, este dificil de observat tendințe, cu atât mai puțin să aibă sens din rândurile mari de date din foile de calcul. Tratarea datelor prezentate în acest fel nu este foarte interesantă, dar odată ce adăugați vizualizare la acele date, lucrurile devin mai ușor de gestionat și acesta este subiectul tutorialului de astăzi - realizarea de diagrame interactive folosind jQuery.

Gestionarea datelor din foile de calcul este plictisitoare.

Este dificil de observat tendințele din rândurile de date din foile de calcul, dar odată ce adăugați vizualizare...

Voi folosi biblioteca de diagrame JavaScript a FusionCharts pentru acest proiect, deoarece oferă o bibliotecă mare de peste 90 de diagrame, este compatibil cu fiecare browser și este destul de ușor de lucrat. De asemenea, oferă un plugin dedicat pentru jQuery, care ne va ușura munca.

Voi începe prin a realiza o diagramă de bază folosind biblioteca de bază JavaScript a FusionCharts și pluginul său jQuery charts, apoi voi adăuga capacitatea de detaliere. Detalierea vă permite să treceți de la o diagramă la alta făcând clic pe o diagramă de date.

Termenul „diagramă de date” este contextual; se referă la o coloană dintr-o diagramă de coloană, linii într-o diagramă cu linii, felii de plăcintă într-o diagramă circulară. Făcând clic pe o diagramă de date din diagrama părinte, vi se prezintă o diagramă copil, care arată datele relative cu un nivel mai adânc.

Făcând clic pe un diagramă de date de pe diagrama părinte, va apărea o diagramă secundară.

Înțelegerea FusionCharts

Înainte de a începe tutorialul, să acoperim anatomia de bază a FusionCharts. Fiecare diagramă este compusă din aceste elemente cheie:

Legendă: titlul de pe diagramă. Ea explică ceea ce se cartografiază.
Subtitrare: textul de sub legenda care specifică informații suplimentare despre diagramă, de multe ori precizează un interval de timp din care au fost colectate datele.
Legendă: Aceasta afișează un simbol pentru fiecare diagramă de date de pe diagramă. O anumită parcelă poate fi activată sau dezactivată făcând clic pe pictograma legenda respectivă.
Graficul de date: Acestea sunt reprezentări de date pe diagramă. Un grafic de date poate fi o coloană într-o diagramă cu coloane, linii într-o diagramă cu linii sau felii într-o diagramă circulară.
Indicator: text care apare atunci când treceți cu mouse-ul peste un grafic de date, folosit pentru a transmite informații suplimentare despre acel grafic de date.

Realizarea unei diagrame de detaliere

Înainte de a începe, iată o captură de ecran a diagramei pe care o vom realiza în acest tutorial. Puteți vedea JSFiddle aici sau puteți accesa codul sursă complet al proiectului pe depozitul meu GitHub.

O previzualizare a proiectului jquery final al acestui tutorial.

Am împărțit procesul de realizare a unui grafic detaliat în cinci pași, așa că să începem.

Pasul 1: Includerea fișierelor JavaScript și crearea containerului pentru diagrame

În primul rând, trebuie să includem toate fișierele JS de care depinde proiectul nostru utilizând eticheta <script> . Dacă pagina nu există deja, creați un document HTML gol și includeți fișierele de mai jos în secțiunea <head> . Acum avem nevoie de următoarele patru fișiere:

jQuery minimizat
Biblioteca JS principală a FusionCharts (include atât fusioncharts.js , cât și fusioncharts.charts.js )
Pluginul jQuery de la FusionCharts

Secțiunea noastră <head> va arăta acum astfel:

 <!-- jQuery --> <script type="text/javascript" src="jquery.min.js"></script> <!-- FusionCharts JS file --> <script type="text/javascript" src="js/fusioncharts.js"></script> <script type="text/javascript" src="js/fusioncharts.charts.js"></script> <!-- jQuery charts plugin --> <script type="text/javascript" src="js/jquery-plugin.js"></script> <!-- custom theme file (optional) --> <script type="text/javascript" src="js/toptal.js"></script>

Acum că avem toate dependențele incluse, este timpul să creăm containerul <div> pentru diagramă și să îl încorporam în pagina noastră cu următorul cod HTML:

 <div>drill-down chart will load here</div>

Acum, îl putem selecta folosind selectorul $ al jQuery în interiorul codului:

 $("#drill-down-chart")

Notă: dacă aveți mai multe diagrame pe pagina dvs., veți avea nevoie de un container separat pentru fiecare diagramă cu un id unic .

Vizualizarea datelor facilitează citirea.

Pasul 2: Obținerea și structurarea datelor

FusionCharts acceptă date atât în format JSON, cât și în format XML, dar am ales să folosesc JSON, deoarece a devenit formatul standard pentru schimbul de date între aplicațiile web. Matricea de date JSON pentru o diagramă de bază conține un obiect pentru fiecare diagramă de date, iar în interiorul fiecărui obiect de diagramă de date definim eticheta și valoarea respectivă. Structura respectivă arată astfel:

 "data": [{ "label": "Q1", "value": "850000", }, { "label": "Q2", "value": "2070000", },... // more data objects ]

Pe măsură ce trasăm graficul nostru de detaliere, JSON-ul său devine mai complex. Legătura dintre diagramele părinte și cele secundare necesită încă o pereche key - value în interiorul fiecărui obiect al matricei de date. Noua cheie (nesurprinzător, numită link ) va conține id-ul diagramei secundare pe care o veți obține când se face clic pe diagrama de date părinte. Formatul pentru definirea id -ului diagramei copil este newchart-dataFormat-childId . Deoarece folosim JSON, știm că orice legăm va arăta ca newchart-json-childId . Iată cum îl definim pentru graficul nostru:

 "data": [{ "label": "Q1", "value": "850000", "link": "newchart-json-q1" }, { "label": "Q2", "value": "2070000", "link": "newchart-json-q2" }, ... // more data objects]

Pasul 3: Inserarea datelor diagramei

Odată ce aveți datele gata, este timpul să introduceți diagrama în pagina dvs. folosind metoda insertFusionCharts furnizată de pluginul jQuery:

 $("#drill-down-chart").insertFusionCharts({ type: 'column2d', id: "mychart", width: '100%', height: '450', dataFormat: 'json', dataSource: { "chart": { "caption": "Quarterly Revenue for 2015", "paletteColors": "#9EA5FC", "xAxisName": "Quarter (Click to drill down)", "yAxisName": "Revenue (In USD)", // more chart configuration options }, "data": [ // see step-2 for explanation ], "linkedData": [ // explained in step-4 ] } })

Să defalcăm fragmentul de cod de mai sus:

type definește tipul de diagramă părinte pe care o trasăm. În acest caz, column2d . Fiecare diagramă din biblioteca FusionCharts are un alias unic. Puteți găsi alias-ul pentru diagrama pe care doriți să o reprezentați pe pagina FusionCharts cu lista de diagrame.
id setează id-ul unic pentru diagramă, care nu trebuie confundat cu id-ul elementului <div> care conține diagrama noastră. id -ul unei diagrame este folosit pentru a selecta o diagramă pentru aplicarea gestionatorilor de evenimente și a metodelor de apelare. Vom folosi acest lucru în Pasul 5.
width și height setează dimensiunea diagramei în pixeli sau procente. 100% lățime spune diagramei să ocupe întreaga lățime a containerului.
Definim formatul datelor folosind atributul dataFormat . Utilizăm JSON pentru exemplul nostru, dar există și alte formate de date acceptabile, cum ar fi un URL XML. Pentru a afla mai multe despre formatele de date, consultați pagina de documentație oficială a FusionCharts.
dataSource conține conținutul real al diagramei, iar obiectul chart din interiorul acesteia conține opțiunile de configurare ale diagramei, cum ar fi legenda și subtitrarea. Matricea data ar trebui să pară familiară, deoarece am făcut-o în Pasul 2 (conține datele de reprezentat grafic), iar linkedData conține conținutul diagramei secundare (diagrama pe care o obțineți după ce faceți clic pe un grafic de date de pe diagrama părinte).

Înrudit: Angajați primii 3% dintre arhitecții Big Data independenți.

Pasul 4: Crearea matricei de date conectate pentru diagramele copil

Acum că avem graficul părinte definit, este timpul să creăm o diagramă copil pentru fiecare diagramă de date, un proces foarte asemănător cu crearea diagramei părinte. Matricea linkedData , creată în metoda „insertFusionCharts”, va defini un obiect separat pentru fiecare diagramă copil. Iată cum arată datele pentru primul diagramă copil:

 "linkeddata": [{ "id": "q1", "linkedchart": { "chart": { "caption": "Monthly Revenue", "subcaption": "First Quarter", "paletteColors": "#EEDA54, #A2A5FC, #41CBE3", "labelFontSize": "16", // more configuration options }, "data": [{ "label": "Jan", "value": "255000" }, { "label": "Feb", "value": "467500" }, //more data] } }, //content for more child charts

id este id-ul diagramei secundare individuale pe care am definit-o la Pasul 2. linkedChart este similar cu dataSource de la Pasul 3 prin faptul că conține conținutul real al diagramei respective. Există numeroase alte atribute care intră în interiorul obiectului diagramă, pe care le voi acoperi în detaliu în secțiunea ulterioară, „Îmbunătățirea designului cu atribute diagramă”.

Pasul 5: Configurare detaliată personalizată

Diverse tipuri de diagrame

Până acum, exemplul nostru de cod are atât diagramele părinte, cât și cele secundare care au același tip de diagramă. Dacă doriți să detaliați un alt tip de diagramă (de la coloană la placă, de exemplu), faceți acest lucru legând evenimentul fusionchartsrendered .

 $('#drill-down-chart').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", overlayButton: { message: 'BACK', // Set the button to show diff message bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

În codul de mai sus, evenimentul fusionchartsrendered va apela metoda configureLink , care definește tipul tuturor diagramelor copil plus orice opțiuni de buton de suprapunere. De asemenea, puteți specifica tipuri de diagrame separate pentru fiecare diagramă secundară. Există o mulțime de opțiuni disponibile în metoda configureLink , așa că s-ar putea să vă fie util să revizuiți documentația de referință API din FusionCharts.

Redarea diagramelor în diferite div

Un alt lucru grozav pe care îl puteți face este să redați diagrama copil într-un container diferit, mai degrabă decât în același ca cel părinte. Pentru aceasta, definiți un container HTML <div> separat după containerul diagramă părinte și transmiteți id-ul acestuia la atributul renderAt , așa cum se arată mai jos:

 $('#chart-container').bind('fusionchartsrendered', function(event, args) { FusionCharts.items['mychart'].configureLink({ type: "doughnut2d", renderAt:"chart-container2", overlayButton: { message: 'BACK', // Set the button to show diff messafe bgColor: '#FCFDFD', borderColor: '#cccccc' } }); });

Valoarea dată atributului renderAt specifică id-ul <div> -ului în care va reda diagrama copil ( chart-container2 ).

Îmbunătățirea designului cu atribute de diagramă

În urma acestui tutorial, veți obține o diagramă funcțională, dar va fi oarecum urâtă dacă o lăsați așa. Pentru o prezentare mai atrăgătoare, va trebui să utilizați „atributele graficului” cosmetice. Atributele diagramei sunt definite în interiorul obiectului chart și sunt utilizate pentru a personaliza opțiunile de randare. S-ar putea să vă fie util să consultați graficul explicativ FusionCharts atunci când examinați aceste atribute cheie configurabile:

paletteColors definește culoarea diagramelor de date. Dacă dați o singură culoare aici, toate coloanele vor avea aceeași culoare. Dacă dați mai multe culori, prima coloană va lua prima valoare, a doua coloană va lua a doua valoare și așa mai departe.
plotSpacePercent controlează spațiul dintre coloane. Valoarea implicită pentru aceasta este 20 (valoarea este un int, dar unitatea este un procent) iar intervalul permis este 0-80. O valoare de zero va face ca coloanele să se strângă și să se lipească unele de altele.
baseFont definește familia de fonturi a diagramei. Puteți folosi orice font doriți; Am folosit Open Sans de la Google în graficul meu. Pur și simplu includeți fișierul de font extern în pagina dvs. HTML pentru a-l utiliza în diagramă.
plotToolText vă permite să personalizați sfaturile instrumente. Folosind macrocomenzi precum $label și * $dataValue , puteți afișa informații specifice despre un anumit grafic de date din interiorul unui <div> , apoi puteți stila acel <div> folosind CSS inline. Iată ce am făcut în exemplul nostru:

 "plotToolText": "<div>$label: $dataValue</div>"

theme vă permite să definiți atributele diagramei într-un fișier diferit și să le aplicați o dată aici, în loc să vă aglomerați obiectul diagramei cu numeroase atribute ale diagramei. Puteți găsi fișierul temă pentru acest tutorial - toptal.js - în folderul JS al depozitului GitHub al proiectului.

Asta este tot ce voi trata, dar există mai mult de o sută de atribute pentru o diagramă, așa că, dacă doriți să explorați mai departe, vă rugăm să vizitați pagina cu atribute ale diagramei FusionCharts și să căutați tipul dvs. particular de diagramă.

Mai multe resurse FusionCharts și jQuery

Deși am acoperit cele mai importante elemente în realizarea unei diagrame de detaliere folosind jQuery, există șanse mari să aveți nevoie de ajutor atunci când încercați să o faceți pe cont propriu. Pentru acel moment, iată câteva resurse suplimentare:

Pluginul jQuery charts: pentru inspirație, vizitați pagina oficială a pluginului jQuery charts pentru a vedea câteva exemple live.
Documentație: dacă nu reușiți să înțelegeți ceva, documentația este primul loc în care ar trebui să vă uitați. Iată link-uri utile pentru pluginul jQuery și diagrama de detaliere (cunoscută și sub numele de diagrame legate).
Demonstrații: Fiecare bibliotecă de diagrame oferă mostre live pentru a-și prezenta capacitățile, iar FusionCharts nu este diferit. Mergeți la galeria sa demonstrativă cu peste 800 de mostre live, cu codul sursă complet dacă aveți nevoie de câteva idei. Există șanse mari ca orice încercați să faceți să fie deja disponibil. Nu este nevoie să începeți de la zero; doar bifurcați lăutarul și continuați de acolo!
Mai multe extensii: dacă nu utilizați vanilla JavaScript sau jQuery, atunci puteți explora mai multe plugin-uri și wrapper-uri oferite de FusionCharts pe această pagină. Au pluginuri dedicate pentru o varietate de biblioteci și cadre, cum ar fi Angular, React, Java, ASP.NET etc.

PS: Voi ieși în secțiunea de comentarii de mai jos, așa că nu ezitați să postați orice întrebări ați putea avea despre articolul meu. Sunt fericit să ajut!

Înrudit: Data Mining pentru analiza predictivă a rețelelor sociale