Accentsconagua

Datavisualisatie met DataTables.js en Highcharts.js

Web ontwerp
Share

In deze zelfstudie leert u hoe u gegevens kunt visualiseren door gebruik te maken van de JavaScript-bibliotheken van DataTables.js en Highcharts.js.

Dit is wat we gaan bouwen (bekijk de grotere versie voor een betere ervaring):

Vereiste bibliotheken

Voor de doeleinden van dit voorbeeld moeten we de volgende bibliotheken in onze pen laden:

  • jQuery
  • DataTables.js
  • Highcharts.js

Met dat in gedachten, als je kijkt onder de instellingen tab, je zult zien dat ik een extern CSS-bestand heb toegevoegd:

Op dezelfde manier heb ik ook vier externe JavaScript-bestanden opgenomen:

Notitie: we moesten jQuery aan ons project toevoegen omdat DataTables.js een plug-in voor jQuery is. Houd er echter rekening mee dat Highcharts.js een pure JavaScript-bibliotheek is en jQuery dus niet nodig heeft.

De HTML

Om dingen uit te schakelen, definiëren we een element met de klasse van houder welke twee sub-elementen bevat:

  • Een tafel met 26 rijen. De eerste rij verwijst naar de tabelkoppen th, terwijl de andere 25 rijen landdetails bevatten. De bron van onze gegevens voor dit voorbeeld is worldometers.info.
  • Een lege div die de grafiek zal bevatten.

Dit is de HTML-structuur:

 
Het is de moeite waard om te vermelden dat we omwille van de eenvoud de eerder genoemde hard-gecodeerde tabelgegevens hebben gespecificeerd. In een echt project kan de tabel echter dynamisch worden gemaakt.
Met de markup klaar en een achtergrondkleur toegevoegd voor de duidelijkheid, ziet het project er als volgt uit:
De CSS
Op dit punt definiëren we enkele basisstijlen, zoals:
.container weergave: flex; flex-wrap: wrap; align-items: center; opvulling: 0 10px;  # dt-table_wrapper width: 35%; marge-recht: 2%;  #chart width: 63%;  tabel text-align: left;  @media-scherm en (max-breedte: 1200px) # dt-table_wrapper, #chart width: 100%;  # dt-table_wrapper margin-right: 0; 
Het is belangrijk om te begrijpen dat:
     
  • De # Dt-table_wrapper bestaat niet in onze opmaak. Het wordt toegevoegd door de DataTables zodra we het initialiseren.
    •  
  • Hoewel we een paar basisregels definiëren voor kleine schermen, moet u er rekening mee houden dat de demo niet volledig reageert. Er zijn veel dingen die we kunnen doen om de tabel en de kaart er beter uit te laten zien op kleine schermen. Voor DataTables is er bijvoorbeeld een Responsive-extensie beschikbaar, maar dat is buiten het bestek van deze zelfstudie.
    •  
Met de CSS op zijn plaats, laten we eens kijken hoe het project eruit ziet. We zullen nog geen groot verschil zien omdat we de bibliotheken niet geïnitialiseerd hebben:
JavaScript
Nu voor het JavaScript-venster in onze pen. Wanneer de DOM klaar is, de in het functie wordt uitgevoerd; deze functie activeert andere subfuncties:
functie init () const table = $ ("# dt-table"). DataTable (); const tableData = getTableData (tabel); createHighcharts (tableData); setTableEvents (tabel); 
Zoals u zult zien, volbrengt elk van deze subfuncties een bepaalde taak.
DataTables initialiseren
De eerste stap is om onze tabel om te zetten in een tabel "DataTables". We kunnen dit doen met slechts één regel code: $ ( "# Dt-table") DataTable ().;
Als we nu naar de tabel kijken, zullen we merken dat het de mogelijkheden van een tabel met gegevenstabellen heeft overgenomen, dat wil zeggen: we kunnen het sorteren, het zoeken, enzovoort. Speel ermee in de volgende demo:
Nu, zoals je kunt zien, past DataTables een standaardsortering toe op de tabel. Indien nodig kunnen we dit gedrag aanpassen.
Tabelgegevens extraheren
De volgende stap is om de tabelgegevens te pakken en de grafiek te maken. We willen niet allemaal de tabelgegevens. Als u terugkijkt op de voltooide versie van onze demo, ziet u dat de grafiek alleen gegevens bevat uit de eerste drie kolommen (Land, Bevolking, Dichtheid).
Met dat in het achterhoofd, zullen we om de benodigde gegevens op te halen, profiteren van de DataTables API. De functie die verantwoordelijk is voor dit gedrag is de volgende:
functie getTableData (tabel) const dataArray = [], countryArray = [], populationArray = [], densityArray = []; // loop tabelrijen table.rows (search: "applied"). every (function () const data = this.data (); countryArray.push (data [0]); populationArray.push (parseInt (data [1] .replace (/ \, / g, ""))); densityArray.push (parseInt (data [2] .replace (/ \, / g, "")));); // sla alle gegevens op in dataArray dataArray.push (countryArray, populationArray, densityArray); return dataArray; 
Binnen deze functie worden de tabelrijen doorlopen en voor elke rij pakken we de gegevens van de doelkolom en slaan deze op in de bijbehorende arrays. Ten slotte worden al die arrays opgeslagen in een andere array. 
Hier is een snelle visualisatie van de meester (d.w.z.. dataArray) array:
Alvorens verder te gaan, is het belangrijk om één ding te begrijpen. Standaard is de getTableData functie moet gegevens verzamelen uit alle tabelrijen. Maar als we in de tabel naar iets specifieks zoeken, moeten alleen de rijen die overeenkomen worden verzameld en verwerkt. Om deze dingen te bereiken, geven we een argument door aan de rijen functie. Specifiek, een object met de zoeken: "toegepast" eigendoms-waarde. 
Houd er nogmaals rekening mee dat als we dit object niet passeren, we altijd gegevens verzamelen uit alle tabelrijen (testen). Lees deze pagina voor meer informatie over de eigenschappen die we aan dit object kunnen doorgeven. 
De grafiek opbouwen
Nu we de gewenste gegevens hebben, zijn we klaar om de grafiek te maken. Dit bevat twee geneste diagrammen, één kolomdiagram en één lijndiagram. 
Dit is de bijbehorende functie:
function createHighcharts (data) Highcharts.setOptions (lang: thousandsSep: ","); Highcharts.chart ("grafiek", title: text: "DataTables to Highcharts", ondertitel: text: "Data from worldometers.info", xAxis: [categories: data [0], labels: rotatie : -45], yAxis: [// first yaxis title: text: "Population (2017)", // secondary yaxis title: text: "Density (P / Km²)", min : 0, opposite: true], series: [name: "Population (2017)", colour: "# 0071A7", type: "column", data: data [1], tooltip: valueSuffix: "M" , name: "Density (P / Km²)", kleur: "# FF404E", type: "spline", data: data [2], yAxis: 1], tooltip: shared: true, legenda : backgroundColor: "#ececec", shadow: true, credits: enabled: false, noData: style: fontSize: "16px"); 
Wees niet overweldigd door de bovenstaande code! Zonder twijfel de beste manier om te begrijpen hoe het werkt, is om het te proberen. Bovendien moet u zeker de documentatie lezen. Hoe dan ook, laten we kort de belangrijkste concepten benadrukken:
     
  • De x-as bevat alle landen.
    •  
  • We definiëren twee y-assen. De eerste bevat alle bevolkingswaarden, terwijl de tweede alle beschikbare dichtheden bevat.
    •  
  • Als onze grafiek geen gegevens bevat, verschijnt er een bericht. Merk op dat we de berichttekst kunnen aanpassen via de LANG voorwerp.
    •  
Laten we, met de grafieken op hun plaats, opnieuw naar onze voortgang kijken:
Synchroniseren van de tabel en grafieken
In het vorige gedeelte hebben we de grafiek gebouwd op basis van de tabelgegevens, maar er is nog steeds geen volledige synchronisatie tussen de tabel en het diagram. Om het te bewijzen, gaat u terug naar de laatste demo en wijzigt u de ordening (sortering) van de tabel of zoekt u iets. U zult merken dat het diagram niet reageert op tabelwijzigingen.  
Om dit op te lossen, maken we gebruik van de DataTables trek evenement. Dit evenement wordt geactiveerd telkens wanneer de tabel wordt bijgewerkt. Dus zodra we de tabel aanpassen, moeten we ons de tabelgegevens herinneren en de grafiek reconstrueren.
Dit is echter het lastige. De trek evenement vuurt ook tijdens de paginapaginatie; er is geen reden om de grafiek tijdens dit proces opnieuw op te bouwen. Idealiter moeten we dit gedrag voorkomen. Gelukkig is daar de pagina evenement dat ons helpt deze taak te volbrengen.
Hier is de code die de gewenste functionaliteit implementeert:
laat tekenen = false; function settableEvents (tabel) // luister naar paginaklanken table.on ("page", () => draw = true;); // luister naar updates en pas het diagram dienovereenkomstig aan. table.on ("draw", () => if (draw) draw = false; else const tableData = getTableData (table); createHighcharts (tableData); ); 
Nu zowel de tabel als het diagram zijn gesynchroniseerd, zullen we de volgende berichten zien als we een "slechte" zoekopdracht uitvoeren:
De definitieve versie van ons project:
Browserondersteuning
Beide plug-ins hebben geweldige ondersteuning voor browsers (ondersteuning van DataTables, ondersteuning voor Highcharts), dus u kunt verwachten dat deze demo goed zal werken in alle recente browsers. 
Houd er ook rekening mee dat deze demo niet is geoptimaliseerd voor kleine schermen. 
Ten slotte gebruiken we zoals gewoonlijk Babel om de ES6-code te compileren tot ES5. 
Conclusie
Dat zijn de mensen! We zijn erin geslaagd onze gegevens te visualiseren door twee populaire en krachtige JavaScript-bibliotheken te combineren. 
Nu je bekend bent met het proces, ga je gang en behandel je de functionaliteit van de definitieve demo. Probeer bijvoorbeeld aangepaste filters aan de tabel toe te voegen.
Zoals altijd, als je vragen hebt of als er iets anders is dat je graag zou willen zien als een volgende stap naar deze tutorial, laat het me dan weten in de reacties hieronder.

	
	
			
	   
	



Web ontwerp


	


			

							×

							
							
    

						
    

      
     land Bevolking (2017) Dichtheid (P / Km²) Med. Leeftijd 
           
     China 1409517397 150 37