Panoramica
Gli organigramma sono diagrammi di una gerarchia di nodi, comunemente utilizzati per rappresentare le relazioni superiori/subordinate in un'organizzazione. Un albero genealogico è un tipo di organigramma.
Esempio
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {packages:["orgchart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Manager'); data.addColumn('string', 'ToolTip'); // For each orgchart box, provide the name, manager, and tooltip to show. data.addRows([ [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'}, '', 'The President'], [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'], ['Alice', 'Mike', ''], ['Bob', 'Jim', 'Bob Sponge'], ['Carol', 'Bob', ''] ]); // Create the chart. var chart = new google.visualization.OrgChart(document.getElementById('chart_div')); // Draw the chart, setting the allowHtml option to true for the tooltips. chart.draw(data, {'allowHtml':true}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>
Caricamento in corso...
Il nome del pacchetto è 'orgchart'
.
google.charts.load('current', {packages: ['orgchart']});
Il nome della classe della visualizzazione è google.visualization.OrgChart
.
var visualization = new google.visualization.OrgChart(container);
Formato dei dati
Una tabella con tre colonne di stringa, in cui ogni riga rappresenta un nodo nell'organigramma. Di seguito sono riportate le tre colonne:
- Colonna 0: l'ID del nodo. Deve essere univoco tra tutti i nodi e può includere qualsiasi carattere, inclusi gli spazi. Questo viene mostrato sul nodo. Puoi specificare un valore formattato da mostrare nel grafico, ma il valore non formattato viene comunque utilizzato come ID.
- Colonna 1: [facoltativo] l'ID del nodo padre. Deve essere il valore senza formattazione della colonna 0 di un'altra riga. Lascia non specificato per un nodo principale.
- Colonna 2: [facoltativo] testo della descrizione comando da mostrare quando un utente passa il mouse sopra questo nodo.
Ogni nodo può avere zero o un nodo padre e zero o più nodi figlio.
Proprietà personalizzate
Puoi assegnare le seguenti proprietà personalizzate agli elementi della tabella di dati, utilizzando il metodo setProperty()
di DataTable
:
Nome proprietà | |
---|---|
selectedStyle |
Si applica a:riga Tabella di dati
Una stringa di stile in linea da assegnare a un nodo specifico quando viene selezionato. Affinché funzioni, devi impostare l'opzione
Esempio: |
stile |
Si applica a:riga Tabella di dati
Una stringa di stile in linea da assegnare a un nodo specifico. Viene eseguito l'override dalla proprietà
Esempio:
|
Opzioni di configurazione
Nome | |
---|---|
allowCollapse |
Determina se il doppio clic comprime un nodo. Tipo:
boolean Predefinita:
false |
allowHtml |
Se è impostato su true, i nomi che includono tag HTML verranno visualizzati come HTML. Tipo:
boolean Predefinita:
false |
color |
Obsoleta. Usa invece nodeClass. Il colore di sfondo degli elementi dell'organigramma. Tipo:
string Predefinita:
'#edf7ff' |
compactRows |
Se impostato su true, i sottoalberi vengono posizionati il più vicino possibile a condizione che i nodi non si sovrappongano. Utilizza questa opzione per ridurre la larghezza complessiva del disegno e la lunghezza dei bordi. Tipo:
boolean Predefinita:
false |
nodeClass |
Un nome di classe da assegnare agli elementi dei nodi. Applica CSS al nome di questa classe per specificare colori o stili per gli elementi del grafico. Tipo:
string Predefinita:
default class name |
selectedNodeClass |
Un nome di classe da assegnare agli elementi dei nodi selezionati. Applica CSS al nome di questa classe per specificare colori o stili per gli elementi del grafico selezionati. Tipo:
string Predefinita:
default class name |
selectionColor |
Obsoleta. Usa invece selectedNodeClass. Il colore di sfondo degli elementi selezionati dell'organigramma. Tipo:
string Predefinita:
'#d6e9f8' |
dimensioni |
"small", "medium" o "large" Tipo:
string Predefinita:
'medium' |
Metodi
Metodo | |
---|---|
collapse(row, collapsed) |
Comprime o espande il nodo.
Tipo di reso:
none |
draw(data, options) |
Disegna il grafico. Tipo di reso:
none |
getChildrenIndexes(row) |
Restituisce un array con gli indici dei figli del nodo specificato. Tipo di reso
Array.<number> |
getCollapsedNodes |
Restituisce un array con l'elenco degli indici del nodo compresso. Tipo di reso:
Array.<number> |
getSelection() |
Implementazione standard di Tipo restituito: array di elementi di selezione
|
setSelection(selection) |
Implementazione standard di
Tipo di reso: nessuno
|
Eventi
Nome | |
---|---|
comprimere |
Evento attivato quando Proprietà:
collapsed : un valore booleano che indica se si tratta di un evento "compressione" o "espansione".
row : l'indice in base zero della riga nella tabella di dati, corrispondente al nodo su cui si fa clic.
|
onmouseover |
Si attiva quando l'utente passa il mouse sopra una riga specifica. Proprietà:
row : l'indice in base zero della riga nella tabella di dati, corrispondente al nodo su cui viene posizionato il mouse.
|
onmouseout |
Si attiva quando l'utente passa il mouse fuori da una riga. Proprietà:
row : l'indice in base zero della riga nella tabella di dati, corrispondente al nodo da cui si sposta il mouse in uscita.
|
select |
Evento di selezione standard Proprietà:
Nessun valore
|
pronta |
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à:
Nessun valore
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.