Accentsconagua

Vizualizarea datelor cu ajutorul DataTables.js și Highcharts.js

Web design
Share

În acest tutorial, veți învăța cum să vizualizați date utilizând avantajele bibliotecilor JavaScript DataTables.js și Highcharts.js.

Iată ce vom construi (consultați versiunea mai mare pentru o experiență mai bună):

Bibliotecile necesare

Pentru scopurile acestui exemplu, va trebui să încărcați în stiloul nostru următoarele biblioteci:

  • jQuery
  • DataTables.js
  • Highcharts.js

În acest sens, dacă te uiți sub Setări , veți vedea că am inclus un fișier CSS extern:

În același mod, am inclus și patru fișiere JavaScript externe:

Notă: a trebuit să adăugăm jQuery la proiectul nostru, deoarece DataTables.js este un plugin jQuery. Cu toate acestea, rețineți că Highcharts.js este o bibliotecă JavaScript pură și, prin urmare, nu necesită jQuery.

HTML-ul

Pentru a elimina lucrurile, definim un element cu clasa lui recipient care conține două subelemente:

  • Un tabel cu 26 rânduri. Primul rând se referă la anteturile tabelului lea, în timp ce celelalte 25 de rânduri transporta detalii de țară. Sursa datelor noastre pentru acest exemplu este worldometers.info.
  • Un gol div care va păstra graficul.

Iată structura HTML:

 
Merită menționat faptul că, din motive de simplitate, am specificat datele tabelului cu coduri greșite. Într-un proiect real, însă, tabela ar putea fi creată dinamic.
Cu marcarea pregătită și o culoare de fundal adăugată pentru claritate, proiectul arată astfel:
CSS
În acest moment, definim câteva stiluri de bază, cum ar fi:
.container display: flex; flex-wrap: folie; aliniere: centru; umplutură: 0 10px;  # dt-table_wrapper lățime: 35%; marginea-dreapta: 2%;  #chart lățime: 63%;  tabel text-aliniere: stânga;  ecranul @media și (max-width: 1200px) # dt-table_wrapper, #chart width: 100%;  # dt-table_wrapper marginea-dreapta: 0; 
Este important să înțelegeți că:
     
  •  # Dt-table_wrapper nu există în marcarea noastră. Acesta este adăugat de tabele de date de îndată ce am inițializa-o.
    •  
  • Deși definim câteva reguli de bază pentru ecrane mici, rețineți că demo-ul nu va fi pe deplin receptiv. Există o mulțime de lucruri pe care le putem face pentru a face tabelul și graficul să arate mai bine pe ecrane mici. De exemplu, pentru tabelele de date există o extensie responsabilă disponibilă, dar acest lucru depășește sfera acestui tutorial.
    •  
Cu ajutorul CSS, să vedem cum arată proiectul. Nu vom vedea încă o mare diferență deoarece nu am inițializat bibliotecile:
JavaScript
Acum, pentru fereastra JavaScript din stiloul nostru. Atunci când DOM este gata, init funcția este executată; această funcție declanșează alte sub-funcții:
funcția init () const tab = $ ("# dt-table"). const tableData = getTableData (tabel); createHighcharts (tableData); setTableEvents (tabel); 
După cum veți vedea, fiecare dintre aceste sub-funcții îndeplinește o anumită sarcină.
Inițializarea tabelelor de date
Primul pas este să transformăm tabelul nostru într-un tabel "Tabele de date". Putem face acest lucru cu o singură linie de cod: $ ( "# Dt-masă") DataTable ().
Dacă ne uităm acum la masă, vom observa că a adoptat capabilitățile unui tabel de tabele de date, și anume: îl putem sorta, îl putem căuta și așa mai departe. Faceți o joacă cu ea în următorul demo:
Acum, după cum puteți vedea, tabelele de date aplică o sortare implicită în tabel. Dacă este necesar, putem personaliza acest comportament.
Extragerea datelor din tabel
Următorul pas este să prindeți datele tabelului și să construiți graficul. Nu vrem toate datele din tabel. De fapt, dacă vă uitați înapoi la versiunea finală a demo-ului nostru, veți observa că graficul conține numai date din primele trei coloane (Țară, Populație, Densitate).
În acest scop, pentru a prelua datele necesare, vom profita de API-ul DataTables. Funcția responsabilă pentru acest comportament este următoarea:
funcția getTableData (tabel) const dataArray = [], countryArray = [], populationArray = [], densityArray = []; / / () () () () () () () () [1] .replace (/ \, / g, "))); densitateaArray.push (parseInt (data [2] .replace (/ \, / g,")))); // stocați toate datele din dataArray dataArray.push (countryArray, populationArray, densityArray); returnați dataArray; 
În cadrul acestei funcții, iterăm prin rândurile de tabel și pentru fiecare rând, luăm datele din coloana țintă și le stocăm în matricele asociate. În cele din urmă, toate aceste matrice sunt stocate într-o altă matrice. 
Iată o vizualizare rapidă a comandantului (adică. dataArray) array:
Înainte de a continua, este important să înțelegeți un singur lucru. În mod implicit, funcția getTableData funcția ar trebui să colecteze date din toate rândurile tabelului. Dar atunci, dacă căutăm masa pentru ceva specific, numai rândurile care se potrivesc ar trebui colectate și procesate. Pentru a realiza aceste lucruri, vom transmite un argument către rânduri funcţie. În mod specific, un obiect cu căutare: "aplicat" Valoarea proprietății. 
Rețineți din nou că dacă nu vom trece acest obiect, vom colecta mereu datele din toate rândurile de tabelă (testați-o). Pentru mai multe informații despre proprietățile pe care le putem trece la acest obiect, asigurați-vă că te uiți la această pagină. 
Construirea diagramei
Acum, că avem datele dorite, suntem gata să construim graficul. Aceasta va conține două diagrame imbricate, o diagramă Coloană și o diagramă Spline. 
Iată funcția corespunzătoare:
funcția createHighcharts (date) Highcharts.setOptions (lang: miiSep: ","); Highcharts.chart ("diagramă", title: text: "Tabele de date pentru Highcharts", subtitlu: text: "Date from worldometers.info", xAxis: [categories: data [0] : -45], yAxis: [// primul titlu yaxis: text: "Populație (2017)", // titlu yaxis secundar: text: "Density (P / Km²) : 0, opus: true], seria: [nume: "Populație (2017)", culoare: "# 0071A7" , name: "Densitate (P / Km²)", culoare: "# FF404E", tip: "spline", data: data [2], yAxis: 1 : backgroundColor: "#ececec", umbra: true, credite: enabled: false, noData: style: fontSize: "16px"); 
Nu fi coplesit de codul de mai sus! Fără îndoială, cel mai bun mod de a înțelege cum funcționează este să-l încerci. În plus, ar trebui să citiți clar documentația. Oricum, să subliniem pe scurt conceptele cheie:
     
  • Axa x conține toate țările.
    •  
  • Definim două axe y. Primul deține toate valorile populației, în timp ce al doilea cuprinde toate densitățile disponibile.
    •  
  • Dacă diagrama noastră nu conține date, apare un mesaj. Rețineți că putem personaliza textul mesajului prin lang obiect.
    •  
Cu graficele în loc, să vedem din nou progresul nostru:
Sincronizarea tabelei și diagramelor
În secțiunea anterioară, am construit graficul pe baza datelor din tabel, dar nu există încă o sincronizare completă între tabel și grafic. Pentru a dovedi acest lucru, reveniți la ultimul demo și schimbați ordonarea (sortarea) mesei sau căutați ceva. Veți observa că graficul nu reacționează la modificările tabelului.  
Pentru a rezolva acest lucru, vom profita de tabelele de date a desena eveniment. Acest eveniment se declanșează de fiecare dată când tabelul se actualizează. Deci, de îndată ce modificăm tabelul, trebuie să ne amintim datele din tabel și să reconstruim diagrama.
Iată deocamdată lucrul dificil. a desena evenimentul are loc și în timpul paginării tabelului; nu există niciun motiv pentru a reconstrui graficul în timpul acestui proces. În mod ideal, ar trebui să prevenim acest comportament. Din fericire, există pagină eveniment care ne ajută să realizăm această sarcină.
Iată codul care implementează funcționalitatea dorită:
lasa draw = false; funcția setTableEvents (table) // ascultați clicurile pe pagină table.on ("page", () => draw = true;); // ascultă pentru actualizări și ajustați graficul în mod corespunzător table.on ("draw", () => if (draw) draw = false; altceva const tableData = getTableData (table); createHighcharts (tableData); ); 
Acum că atât masa, cât și graficul sunt sincronizate, dacă facem o căutare "rea", vom vedea următoarele mesaje:
Versiunea finală a proiectului nostru:
Suport pentru browser
Ambele pluginuri au suport de browser excelent (suport pentru tablete, suport Highcharts), astfel încât să vă puteți aștepta ca acest demo să funcționeze bine în toate browserele recente. 
Rețineți din nou că această demonstrație nu este optimizată pentru ecrane mici. 
În sfârșit, ca de obicei, folosim Babel pentru a compila codul ES6 până la ES5. 
Concluzie
Asta-i oameni buni! Am reușit să vizualizăm datele noastre prin combinarea a două biblioteci JavaScript populare și puternice. 
Acum, că sunteți familiarizați cu procesul, continuați și elaborați funcționalitatea demo-ului final. De exemplu, încercați să adăugați filtre personalizate în tabel.
Ca întotdeauna, dacă aveți întrebări sau dacă doriți să vedeți altceva ca următorul pas către acest tutorial, anunțați-ne în comentariile de mai jos.

	
	
			
	   
	



Web design


	


			

							×

							
							
    

						
    

      
     Țară Populație (2017) Densitate (P / Km²) Med. Vârstă 
           
     China 1409517397 150 37