Panoramica
Un diagramma di Sankey è una visualizzazione utilizzata per rappresentare un flusso da un insieme di valori a un altro. Gli elementi collegati sono chiamati nodi e le connessioni sono chiamate link. I Sankey sono ideali per mostrare una mappatura many-to-many tra due domini (ad es. università e principali) o più percorsi tramite un insieme di fasi (ad esempio, Google Analytics utilizza i Sankey per mostrare il flusso del traffico da pagine ad altre pagine del sito web).
Più curiosi prendono il nome dal capitano Sankey, che ha creato uno diagramma dell'efficienza di un motore a vapore utilizzando frecce con larghezze proporzionali alla perdita di calore.
Nota: il grafico di Sankey potrebbe subire modifiche sostanziali nelle versioni future di Google Classifiche.
I diagrammi di Sankey vengono visualizzati nel browser tramite SVG o VML, a seconda di quale sia appropriato per il browser dell'utente. Il codice del layout Sankey di Google deriva dal codice di layout Sankey di D3.
Nota: i grafici di Sankey di Google non sono disponibili in Microsoft Internet Explorer 8 e versioni precedenti.
Esempio semplice
Supponiamo che tu abbia due categorie, A e B, collegate ad altre tre categorie, X, Y e Z. Alcune di queste connessioni sono più pesanti di altre. Ad esempio, B ha una connessione sottile a X e una connessione molto più spessa a Y.
Prova a passare il mouse sopra uno dei link per evidenziare la connessione.
Per creare un grafico di Sankey, fornisci un insieme di righe, ognuna contenente informazioni su una connessione: da, A e peso. A questo punto, utilizza il metodo google.visualization.Sankey()
per inizializzare il grafico e il metodo draw()
per
visualizzarlo:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['sankey']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'A', 'X', 5 ], [ 'A', 'Y', 7 ], [ 'A', 'Z', 6 ], [ 'B', 'X', 2 ], [ 'B', 'Y', 9 ], [ 'B', 'Z', 4 ] ]); // Sets chart options. var options = { width: 600, }; // Instantiates and draws our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_basic')); chart.draw(data, options); } </script> </head> <body> <div id="sankey_basic" style="width: 900px; height: 300px;"></div> </body> </html>
Nota: evita cicli nei dati: se A si collega a se stesso o a B che rimanda a C e ad A, il grafico non verrà visualizzato.
Sankey multilivello
Puoi creare un grafico di Sankey con più livelli di connessioni:
I grafici di Sankey aggiungono ulteriori livelli in base alle esigenze, li dispongono automaticamente. Ecco il codice completo del grafico riportato sopra:
<html> <body> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="sankey_multiple" style="width: 900px; height: 300px;"></div> <script type="text/javascript"> google.charts.load("current", {packages:["sankey"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'From'); data.addColumn('string', 'To'); data.addColumn('number', 'Weight'); data.addRows([ [ 'Brazil', 'Portugal', 5 ], [ 'Brazil', 'France', 1 ], [ 'Brazil', 'Spain', 1 ], [ 'Brazil', 'England', 1 ], [ 'Canada', 'Portugal', 1 ], [ 'Canada', 'France', 5 ], [ 'Canada', 'England', 1 ], [ 'Mexico', 'Portugal', 1 ], [ 'Mexico', 'France', 1 ], [ 'Mexico', 'Spain', 5 ], [ 'Mexico', 'England', 1 ], [ 'USA', 'Portugal', 1 ], [ 'USA', 'France', 1 ], [ 'USA', 'Spain', 1 ], [ 'USA', 'England', 5 ], [ 'Portugal', 'Angola', 2 ], [ 'Portugal', 'Senegal', 1 ], [ 'Portugal', 'Morocco', 1 ], [ 'Portugal', 'South Africa', 3 ], [ 'France', 'Angola', 1 ], [ 'France', 'Senegal', 3 ], [ 'France', 'Mali', 3 ], [ 'France', 'Morocco', 3 ], [ 'France', 'South Africa', 1 ], [ 'Spain', 'Senegal', 1 ], [ 'Spain', 'Morocco', 3 ], [ 'Spain', 'South Africa', 1 ], [ 'England', 'Angola', 1 ], [ 'England', 'Senegal', 1 ], [ 'England', 'Morocco', 2 ], [ 'England', 'South Africa', 7 ], [ 'South Africa', 'China', 5 ], [ 'South Africa', 'India', 1 ], [ 'South Africa', 'Japan', 3 ], [ 'Angola', 'China', 5 ], [ 'Angola', 'India', 1 ], [ 'Angola', 'Japan', 3 ], [ 'Senegal', 'China', 5 ], [ 'Senegal', 'India', 1 ], [ 'Senegal', 'Japan', 3 ], [ 'Mali', 'China', 5 ], [ 'Mali', 'India', 1 ], [ 'Mali', 'Japan', 3 ], [ 'Morocco', 'China', 5 ], [ 'Morocco', 'India', 1 ], [ 'Morocco', 'Japan', 3 ] ]); // Set chart options var options = { width: 600, }; // Instantiate and draw our chart, passing in some options. var chart = new google.visualization.Sankey(document.getElementById('sankey_multiple')); chart.draw(data, options); } </script> </body> </html>
Controllo dei colori
I grafici di Sankey consentono di impostare colori personalizzati per nodi e link. È possibile assegnare tavolozze dei colori personalizzate sia ai nodi che ai link utilizzando le
opzioni colors
(rispettivamente sankey.node.colors
e sankey.link.colors
). È anche possibile
avere diverse modalità di colorazione utilizzando l'opzione
colorMode
.
Se i colori non vengono personalizzati, vengono usati per impostazione predefinita la tavolozza Materiale standard.
var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f', '#cab2d6', '#ffff99', '#1f78b4', '#33a02c']; var options = { height: 400, sankey: { node: { colors: colors }, link: { colorMode: 'gradient', colors: colors } } };
Puoi controllare i colori di link, nodi ed etichette tramite le opzioni di configurazione. Qui ne selezioniamo tre con la stessa tonalità, ma con luminosità diverse:
Queste opzioni hanno questo aspetto:
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae' } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
Puoi anche controllare la trasparenza dei link con
l'opzione sankey.link.color.fillOpacity
:
var options = { width: 600, sankey: { link: { color: { fill: '#d799ae', fillOpacity: 0.8 } }, node: { colors: [ '#a61d4c' ], label: { color: '#871b47' } }, } };
Per creare un bordo intorno ai link, utilizza le opzioni sankey.link.color.stroke
e sankey.link.color.strokeWidth
:
Il colore del tratto può essere specificato in formato RGB o con un nome in inglese.
var options = { width: 750, height: 400, sankey: { node: { colors: [ '#a61d4c' ] }, link: { color: { stroke: 'black', strokeWidth: 1 } }, } };
Personalizzazione delle etichette
Il testo nei grafici di Sankey può essere personalizzato
con sankey.node.label.fontName
e amici:
Questa è l'opzione stanza per la tabella riportata sopra:
var options = { width: 600, sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 14, color: '#871b47', bold: true, italic: true } } }, };
Puoi modificare la posizione delle etichette rispetto ai nodi
con l'opzione sankey.node.labelPadding
:
Nel grafico in alto, abbiamo aggiunto 30 pixel di spaziatura interna tra le etichette e i nodi.
var options = { width: 600, sankey: { node: { labelPadding: 30 } }, };
Regolazione dei nodi
Puoi controllare la larghezza dei nodi
con sankey.node.width
:
Sopra, abbiamo impostato la larghezza del nodo su 2.
var options = { width: 600, sankey: { node: { width: 2 } }, };
Puoi regolare la distanza tra i nodi
con sankey.node.nodePadding
:
Nel grafico in alto, abbiamo impostato sankey.node.nodePadding
su 80.
var options = { width: 900, sankey: { node: { nodePadding: 80 } }, };
Caricamento in corso...
Il nome del pacchetto google.charts.load
è "sankey"
:
google.charts.load("current" {packages: ["sankey"]});
Il nome della classe della visualizzazione è google.visualization.Sankey
:
var visualization = new google.visualization.Sankey(container);
Formato dei dati
Righe: ogni riga della tabella rappresenta una connessione tra due etichette. La terza colonna indica la forza della connessione e si rifletterà nella larghezza del percorso tra le etichette.
Colonne:
Colonna 0 | Colonna 1 | Colonna 2 | ... | Colonna N (facoltativa) | |
---|---|---|---|---|---|
Scopo: | Origine | Destinazione | Valore | ... | Ruoli facoltativi |
Tipo di dati: | stringa | stringa | numero | ... | |
Ruolo: | dominio | dominio | dati | ... | |
Ruoli colonna facoltativi: | Assente |
Assente |
Assente |
... |
Opzioni di configurazione
Nome | |
---|---|
forceIFrame |
Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame. Tipo: booleano
Predefinito:false
|
altezza |
Altezza del grafico, in pixel. Tipo:numero
Predefinita: altezza dell'elemento contenitore
|
sankey.iterations |
Con i valori di Sankey multilivello, a volte non è ovvio stabilire dove posizionare i nodi per una leggibilità ottimale. Il motore di layout D3 sperimenta con layout dei nodi diversi, interrompendosi dopo Tipo: numero intero
Predefinito:32
|
sankey.link |
Controlla gli attributi delle connessioni tra nodi. Attualmente tutti gli attributi riguardano il colore: sankey: { link: { color: { fill: '#efd', // Color of the link. fillOpacity: 0.8, // Transparency of the link. stroke: 'black', // Color of the link border. strokeWidth: 1 // Thickness of the link border (default 0). }, colors: [ '#a6cee3', // Custom color palette for sankey links. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving the links for that node the color. '#33a02c' ] } } Tipo:oggetto
Predefinito:null
|
sankey.link.colorMode |
Imposta una modalità di colorazione per i collegamenti tra nodi. Valori possibili:
Questa opzione sostituisce sankey.link.color. Tipo:stringa
Predefinito: "nessuno"
|
sankey.node |
Controlla gli attributi dei nodi (le barre verticali tra i link): sankey: { node: { label: { fontName: 'Times-Roman', fontSize: 12, color: '#000', bold: true, italic: false }, interactivity: true, // Allows you to select nodes. labelPadding: 6, // Horizontal distance between the label and the node. nodePadding: 10, // Vertical distance between nodes. width: 5, // Thickness of the node. colors: [ '#a6cee3', // Custom color palette for sankey nodes. '#1f78b4', // Nodes will cycle through this palette '#b2df8a', // giving each node its own color. '#33a02c' ] } } Tipo:oggetto
Predefinito:null
|
sankey.node.colorMode |
Imposta una modalità di colorazione per i nodi di Sankey. Valori possibili:
Tipo:stringa
Predefinito: "univoco"
|
Descrizione comando |
Un oggetto con membri per configurare vari elementi della descrizione comando. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: {textStyle: {color: '#FF0000'}, showColorCode: true} Tipo:oggetto
Predefinito:null
|
tooltip.isHtml |
Se il criterio viene impostato su true, utilizza le descrizioni comando per il rendering HTML (anziché SVG). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando. Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalla visualizzazione Grafico a bolle. Tipo: booleano
Predefinito:false
|
tooltip.textStyle |
Un oggetto che specifica lo stile di testo della descrizione comando. L'oggetto ha questo formato: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
Tipo:oggetto
Predefinita:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
larghezza |
Larghezza del grafico, in pixel. Tipo:numero
Predefinita: larghezza dell'elemento contenitore
|
Metodi
Metodo | |
---|---|
draw(data, options) |
Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato
l'evento Tipo di reso: nessuno
|
getBoundingBox(id) |
Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico
I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato. Tipo restituito: oggetto
|
getSelection() |
Restituisce un array delle entità del grafico selezionate.
Le entità selezionabili sono barre, voci di legenda e categorie.
Per questo grafico, è possibile selezionare una sola entità alla volta.
Tipo restituito: array di elementi di selezione
|
setSelection() |
Seleziona le entità del grafico specificate. Annulla la selezione precedente.
Le entità selezionabili sono barre, voci di legenda e categorie.
Per questo grafico è possibile selezionare una sola entità alla volta.
Tipo di reso: nessuno
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
Eventi
Nome | |
---|---|
error |
Attivato quando si verifica un errore durante il tentativo di rendering del grafico. Proprietà: id, messaggio
|
onmouseover |
Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo). Proprietà:riga, colonna
|
onmouseout |
Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo). Proprietà:riga, colonna
|
ready |
Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo Proprietà:nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama
Proprietà:nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.