jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Home page > Plugins > Il plugin "TreeMap"

Il plugin "TreeMap"

venerdì 23 febbraio 2007, di Renato

Tutte le versioni di questo articolo: [English] [italiano]

Una TreeMap è una modalità di visualizzazione compatta di dati organizzati in forma gerarchica.


Demo

Un po’ di storia

Quante volte vi è capitato di aver poco spazio sul vostro disco rigido e di voler sapere quali sono le cartelle che occupano maggior spazio? Avreste sicuramente desiderato uno strumento in grado di visualizzare queste informazioni in una forma facilmente comprensibile. Proprio a questo scopo, nel lontano 1990, un professore dell’Università del Maryland, Ben Shneiderman, creò le TreeMaps. Le TreeMaps visualizzano i dati sotto forma di rettangoli con aree proporzionali al loro valore e con colori di sfondo diversi.

Ecco a voi un plugin per jQuery nuovo di zecca che vi permetterà di mostrare TreeMap sul vostro sito a partire dai dati di una semplice tabella HTML o anche da altre fonti.

Come funziona

Il plugin consiste in un unico metodo treemap che, applicato ad un oggetto jQuery, lo sostituisce con la TreeMap generata a partire dai dati forniti.

Se l’oggetto jQuery contiene delle tabelle HTML, la funzione treemap estrarrà automaticamente i dati dalla tabella [1] e la sostituirà con una Treemap

Ecco un esempio:

Creare una Treemap di dimensioni 640x480 a partire dalle tabelle presenti nella pagina:

jQuery("table").treemap(640,480);

Se i dati in tabella non si trovano nella prima e nella seconda colonna (ed eventualmente nella terza per il colore) è possibile indicare quali siano le colonne contenenti i dati utili (opzioni labelCell, dataCell, colorCell):

Creare una Treemap di dimensioni 640x480 a partire dalle tabelle presenti nella pagina, prelevando le descrizioni dalla 3° colonna ed dati dalla 5°:

jQuery("table").treemap(640,480,{labelCell:2,dataCell,4});

Se volessi conservare la tabella di partenza sulla pagina, basterebbe indicare al plugin un elemento all’interno del quale creare la TreeMap (opzione target):

Creare una TreeMap di dimensioni 640x480 a partire dalla tabella avente l’id "dati" all’interno dell’elemento con id "mappa":

jQuery("table#dati").treemap(640,480,{target:"#mappa"});

Se l’oggetto jQuery contiene elementi diversi da tabelle, oppure si vuole pretrattare i dati prima della creazione della Treemap, è possibile fornire una funzione che dovrà occuparsi di estrarre i dati (opzione getData):

Creare una TreeMap a partire dai dati contenuti in un lista non ordinata

<ul>
 <li>
   <span class="desc">Descrizione</span>
   <span class="dato">100</span>
 </li>
 <li>...</li>
 ...
</ul>

jQuery("ul").treemap(640,480,{getData:getDataFromUL});
function getDataFromUL(el) {
 var data = [];
 jQuery("li",el).each(function(){
   var item = jQuery(this);
   var row = [item.find("span.desc").html(),item.find("span.dato").html()];
   data.push(row);
 });
 return data;
}

La funzione getData prende in argomento l’elemento a cui è applicato il plugin e deve restituire una matrice in cui ogni elemento è a sua volta una matrice contenente la descrizione ed il valore del dato nella primo e nel secondo elemento rispettivamente (ed eventualmente un ulteriore dato nel terzo elemento rappresentato sotto forma di colore).

Ecco un esempio di matrice restituita da getData:

[
 ['descr1',1],
 ['descr2',2],
 ['descr3',3],
]

Per la creazione di TreeMap gerarchiche, sarà sufficiente passare all’opzione getData una funzione che restituisce una matrice leggermente diversa dalla precedente. Al posto del valore, presente nel secondo elemento di ogni riga della matrice precedente, basterà assegnare una nuova matrice di dati, come mostrato di seguito.

[
 ['livello1',[
               ['livello1-dato1,1],
               ['livello1-dato2,2],
               ['livello1-dato3,3],
             ]
 ],
 ['livello2',[
               ['livello2-dato1,1],
               ['livello2-dato2,2],
               ['livello2-dato3,3],
             ]
 ],
 ['livello3',[
               ['livello3-dato1,1],
               ['livello3-dato2,2],
               ['livello3-dato3,3],
             ]
 ]
]

La visualizzazione dei dati si presenta meglio se questi ultimi sono ordinati. il plugin Treemap può ordinare automaticamente i dati mediante l’opzione sort

jQuery("ul").treemap(640,480,{getData:getDataFromUL,sort:true});

Un’ulteriore opzione (headHeight) consente di impostare l’altezza in pixel delle intestazioni dei gruppi gerarchici. Per disattivare le intestazioni sarà sufficiente impostare headHeight a 0

jQuery("ul").treemap(640,480,{getData:getDataFromUL,headHeight:0});

Per impostare la larghezza in pixel dei bordi tra le celle è disponibile l’opzione borderWidth

Nel caso in cui i dati contengano anche il valore secondario per la rappresentazione dei colori dei rettangoli, è possibile mostrare una legenda dei colori mediante l’opzione legend. La legenda determina automaticamente se il dato secondario è un dato numerico o no, mostrando una legenda con un gradiente di colori nel primo caso o con una serie di colori discreti nel secondo.

jQuery("ul").treemap(640,480,{getData:getDataFromUL,legend:true});

In maniera predefinita la descrizione dei valori della legenda è il dato secondario passato al plugin. Tuttavia è possibile impostare una funzione callback descriptionCallbackche può modificare generare delle descrizioni differenti a partire dal dato secondario.

jQuery("ul").treemap(640,480,{getData:getDataFromUL,descriptionCallback:generateDescription});

function generateDescription(val) {return "Valore: "+val;}

Gli stili

Per attribuire degli stili alle TreeMaps create ecco le classi CSS da manipolare:

  • .treemapView
    La classe dell’elemento che "contiene" la treemap. Per le treemaps gerarchiche, le celle dei livelli superiori contengono a loro volta un elemento con la classe .treemapView
  • .treemapSquare
    La classe che contiene una "riga" di celle. La riga può essere orizzonatale o verticale
  • .treemapH,.treemapV
    La classe che specifica l’orientamento di una riga
  • .treemapCell
    La classe che individua le singole celle.
  • .treemapHead
    La classe che individua le intestazioni dei gruppi di dati per le treemaps gerarchiche
  • .treemapLegend
    La classe che individua la barra della legenda
  • .treemapLegendDescr
    La classe che individua la descrizione di una voce della legenda

Documenti allegati

Note

[1] In maniera predefinita verrà estratta la descrizione dalla prima colonna, il dato principale dalla seconda (area), il dato opzionale secondario dalla terza (colore)

Rispondere all'articolo


Ultimi commenti