Accentsconagua

Visualizzazione dei dati con DataTables.js e Highcharts.js

Web design
Share

In questo tutorial imparerai come visualizzare i dati sfruttando le librerie JavaScript DataTables.js e Highcharts.js.

Ecco cosa costruiremo (controlla la versione più grande per un'esperienza migliore):

Biblioteche richieste

Per gli scopi di questo esempio, dovremo caricare le seguenti librerie nella nostra penna:

  • jQuery
  • DataTables.js
  • Highcharts.js

Con questo in mente, se guardi sotto il impostazioni scheda, vedrai che ho incluso un file CSS esterno:

Allo stesso modo, ho anche incluso quattro file JavaScript esterni:

Nota: abbiamo dovuto aggiungere jQuery al nostro progetto perché DataTables.js è un plugin jQuery. Tuttavia, tieni presente che Highcharts.js è una pura libreria JavaScript e quindi non richiede jQuery.

L'HTML

Per dare il calcio d'inizio definiamo un elemento con la classe di contenitore che contiene due sotto-elementi:

  • Un tavolo con 26 righe. La prima riga si riferisce alle intestazioni della tabella esimo, mentre le altre 25 righe riportano i dettagli del paese. La fonte dei nostri dati per questo esempio è worldometers.info.
  • Un vuoto div che terrà il grafico.

Ecco la struttura HTML:

 
Vale la pena ricordare che, per semplicità, abbiamo specificato i dati della tabella hard-coded summenzionati. Tuttavia, in un progetto reale, la tabella potrebbe essere creata dinamicamente.
Con la marcatura pronta e un colore di sfondo aggiunto per chiarezza, il progetto si presenta così:
Il CSS
A questo punto, definiamo alcuni stili di base, in questo modo:
.container display: flex; flex-wrap: wrap; align-items: center; padding: 0 10px;  # dt-table_wrapper width: 35%; margine-destra: 2%;  #chart width: 63%;  table text-align: left;  @media screen e (max-width: 1200px) # dt-table_wrapper, #chart width: 100%;  # dt-table_wrapper margin-right: 0; 
È importante capire che:
     
  • Il # Dt-table_wrapper non esiste nel nostro markup. Viene aggiunto dai DataTable non appena viene inizializzato.
    •  
  • Mentre definiamo alcune regole di base per gli schermi di piccole dimensioni, tieni presente che la demo non sarà pienamente reattiva. Ci sono molte cose che possiamo fare per rendere il tavolo e il grafico un aspetto migliore su schermi piccoli. Ad esempio, per DataTables è disponibile un'estensione Responsive, ma questo va oltre lo scopo di questo tutorial.
    •  
Con il CSS in atto, vediamo come appare il progetto. Non vedremo ancora una grande differenza perché non abbiamo inizializzato le librerie:
Il JavaScript
Ora per la finestra di JavaScript nella nostra penna. Quando il DOM è pronto, il dentro la funzione è eseguita; questa funzione attiva altre sotto-funzioni:
function init () const table = $ ("# dt-table"). DataTable (); const tableData = getTableData (table); createHighcharts (TableData); setTableEvents (tabella); 
Come vedrai, ciascuna di queste sottofunzioni svolge un determinato compito.
Inizializzazione di DataTable
Il primo passo è convertire la nostra tabella in una tabella "DataTables". Possiamo farlo con una sola riga di codice: $ ( "# DT-tavolo") DataTable ().;
Se osserviamo ora la tabella, noteremo che ha adottato le funzionalità di una tabella DataTables, ovvero: possiamo ordinarla, cercarla e così via. Gioca con questo nella seguente demo:
Ora, come puoi vedere, DataTables applica un ordinamento predefinito alla tabella. Se necessario, possiamo personalizzare questo comportamento.
Estrazione dei dati della tabella
Il prossimo passo è prendere i dati della tabella e costruire il grafico. Noi non vogliamo tutti i dati della tabella. Infatti, se si guarda indietro alla versione finale della nostra demo, si noterà che il grafico contiene solo i dati delle prime tre colonne (Paese, Popolazione, Densità).
Con questo in mente, per recuperare i dati richiesti, trarremo vantaggio dall'API DataTables. La funzione responsabile di questo comportamento è la seguente:
function getTableData (table) const dataArray = [], countryArray = [], populationArray = [], densityArray = []; // loop table rows table.rows (search: "applied"). every (function () const data = this.data (); countryArray.push (data [0]); populationArray.push (parseInt (dati [1] .replace (/ \, / g, ""))); densityArray.push (parseInt (data [2] .replace (/ \, / g, "")));); // memorizza tutti i dati in dataArray dataArray.push (countryArray, populationArray, densityArray); return dataArray; 
All'interno di questa funzione, iteriamo attraverso le righe della tabella e per ogni riga, prendiamo i dati della colonna di destinazione e li memorizziamo negli array associati. Infine, tutti quegli array sono memorizzati all'interno di un altro array. 
Ecco una rapida visualizzazione del master (ad es. dataArray) array:
Prima di andare avanti, è importante capire una cosa. Di default, il getTableData la funzione dovrebbe raccogliere i dati da tutte le righe della tabella. Ma poi, se cerchiamo nella tabella qualcosa di specifico, solo le righe che corrispondono devono essere raccolte ed elaborate. Per realizzare queste cose, passiamo una discussione al righe funzione. In particolare, un oggetto con il ricerca: "applicata" costo dell'immobile. 
Ancora una volta si noti che se non passiamo questo oggetto, raccoglieremo sempre i dati da tutte le righe della tabella (testarlo). Per ulteriori informazioni sulle proprietà che possiamo passare a questo oggetto, assicurati di guardare questa pagina. 
Costruire il grafico
Ora che abbiamo i dati desiderati, siamo pronti per costruire il grafico. Questo conterrà due grafici annidati, un grafico a colonne e un grafico Spline. 
Ecco la funzione corrispondente:
function createHighcharts (data) Highcharts.setOptions (lang: thousandSep: ","); Highcharts.chart ("chart", title: text: "DataTable to Highcharts", sottotitolo: text: "Dati da worldometers.info", xAxis: [categories: data [0], labels: rotation : -45], yAxis: [// primo titolo yaxis: testo: "Popolazione (2017)", // Titolo secondario yaxis: testo: "Densità (P / Km²)", min : 0, opposto: vero], serie: [nome: "Popolazione (2017)", colore: "# 0071A7", digitare: "colonna", dati: dati [1], suggerimento: valueSuffix: "M" , nome: "Densità (P / Km²)", colore: "# FF404E", tipo: "spline", dati: dati [2], yAxis: 1], tooltip: shared: true, legend : backgroundColor: "#ececec", shadow: true, credits: enabled: false, noData: style: fontSize: "16px"); 
Non essere sopraffatto dal codice qui sopra! Senza dubbio il modo migliore per capire come funziona è provarlo. Inoltre, dovresti assolutamente leggere la documentazione. In ogni caso, mettiamo brevemente in evidenza i concetti chiave:
     
  • L'asse x contiene tutti i paesi.
    •  
  • Definiamo due assi y. Il primo contiene tutti i valori della popolazione, mentre il secondo include tutte le densità disponibili.
    •  
  • Se il nostro grafico non contiene dati, viene visualizzato un messaggio. Nota che siamo in grado di personalizzare il testo del messaggio attraverso il Lang oggetto.
    •  
Con i grafici in atto, esaminiamo nuovamente i nostri progressi:
Sincronizzazione della tabella e dei grafici
Nella sezione precedente, abbiamo creato il grafico in base ai dati della tabella, ma non c'è ancora alcuna sincronizzazione completa tra la tabella e il grafico. Per dimostrarlo, torna all'ultima demo e modifica l'ordinamento (ordinamento) del tavolo o cerca qualcosa. Noterai che il grafico non reagisce alle modifiche della tabella.  
Per risolvere questo problema, utilizzeremo i DataTable disegnare evento. Questo evento si attiva ogni volta che la tabella viene aggiornata. Quindi, non appena modifichiamo la tabella, dovremmo ricordare i dati della tabella e ricostruire il grafico.
Ecco la cosa complicata però. Il disegnare l'evento si attiva anche durante l'impaginazione della tabella; non c'è motivo di ricostruire il grafico durante questo processo. Idealmente, dovremmo evitare questo comportamento. Per fortuna, c'è il pagina evento che ci aiuta a portare a termine questo compito.
Ecco il codice che implementa la funzionalità desiderata:
lascia disegnare = falso; function setTableEvents (table) // listen for page clicks table.on ("page", () => draw = true;); // ascolta gli aggiornamenti e aggiusta il grafico di conseguenza table.on ("draw", () => if (draw) draw = false; else const tableData = getTableData (table); createHighcharts (tableData); ); 
Ora che sia la tabella che il grafico sono sincronizzati, se facciamo una ricerca "cattiva", vedremo i seguenti messaggi:
La versione finale del nostro progetto:
Supporto del browser
Entrambi i plugin hanno un ottimo supporto per i browser (supporto DataTables, supporto Highcharts), quindi puoi aspettarti che questa demo funzioni bene in tutti i browser recenti. 
Tieni nuovamente presente che questa demo non è ottimizzata per schermi di piccole dimensioni. 
Infine, come al solito, usiamo Babel per compilare il codice ES6 fino a ES5. 
Conclusione
Questo è tutto gente! Siamo riusciti a visualizzare i nostri dati combinando due popolari e potenti librerie JavaScript. 
Ora che hai familiarità con il processo, vai avanti ed elabora la funzionalità della demo finale. Ad esempio, prova ad aggiungere filtri personalizzati alla tabella.
Come sempre, se hai qualche domanda o se c'è qualcos'altro che vorresti vedere come passo successivo in questo tutorial, fammi sapere nei commenti qui sotto.

	
	
			
	   
	



Web design


	


			

							×

							
							
    

						
    

      
     Nazione Popolazione (2017) Densità (P / Km²) Med. Età 
           
     Cina 1.409.517,397 mila 150 37